當用戶到達某個點滾動網頁時,是否可以更改滾動條位置?例如,一旦您到達頁面的中間位置,滾動條就會自動移動回頂端。更改滾動條位置
Q
更改滾動條位置
18
A
回答
29
可以計算使用onscroll事件滾動條的當前位置的百分比,如果達到50%的滾動位置可以設置爲頁面的頂部與scrollTo功能:
window.onload = function() {
window.onscroll = function() {
var doc = document.body,
scrollPosition = doc.scrollTop,
pageSize = (doc.scrollHeight - doc.clientHeight),
percentageScrolled = Math.floor((scrollPosition/pageSize) * 100);
if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top
window.scrollTo(0,0);
}
};
};
您可以查看我的示例here。
9
是的,我已經看過幾次了。下面是一些JS代碼:
window.scrollBy(0,50)
50要通過滾動的像素數量。
2
(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop)應該在幾乎任何瀏覽器中爲您提供當前滾動位置。
4
您需要關注的三個滾動功能是window.scroll(x,y)
,window.scrollBy(dx,dy)
和window.scrollTo(x,y)
。
正如David所說,您需要滾動位置才能知道您的位置,並使用window.onscroll
事件觸發此計算。
+1
這些可在所有瀏覽器上使用,或者需要某些功能檢測嗎? – 2011-10-04 00:32:54
相關問題
- 1. 更改TextBox中的滾動條位置?
- 2. 如何更改設置位置的滾動條軌道顏色?
- 3. 更改滾動條
- 4. 在C++中更改面板中自動滾動條的位置
- 5. 重置ItemsSource上的滾動條更改
- 6. 無限滾動滾動條位置跳
- 7. jquery更改滾動位置上的css
- 8. jquery鼠標滾動更改div位置
- 9. 更改WPF Datagrid中滾動條的位置
- 10. 如何使用滾動條重置滾動條內的滾動條位置?
- 11. 固定滾動條位置
- 12. WPF滾動條位置
- 13. 計算滾動條位置
- 14. Android AlertDialog滾動條位置
- 15. 如何使用jQuery或JavaScript更改光標位置或滾動條位置?
- 16. Android - 更改Android動作條的位置
- 17. 更改滾動條樣式
- 18. 將滾動位置存儲在滾動方向更改
- 19. HTML - 移動版面 - 定位更改後的滾動位置
- 20. 重置WPF Datagrid滾動條位置
- 21. 設置滾動條的位置
- 22. 設置一個滾動條的位置
- 23. 設置ListBox的滾動條位置
- 24. Xceed DataGrid重置滾動條位置
- 25. 滾動位置的動畫條
- 26. 滾動條位置正在移動可見/不可見更改控件
- 27. 滾動條定位
- 28. 滾動條在更改滾動值時不更新
- 29. DataGridViews與同步滾動條:滾動條位置重置調整大小
- 30. android scrollview和滾動條的位置
@CMS:優秀的答案! – Josh 2009-08-08 14:47:18
window.scrollTo(0,0); 不適合我在chomre – SuperUberDuper 2016-05-24 09:54:13