Có thể thay đổi vị trí thanh cuộn khi người dùng đạt đến một điểm nhất định di chuyển xuống một trang web không? Ví dụ một khi bạn đã đạt được một nửa xuống dưới trang thanh cuộn sẽ di chuyển tự động trở lại đầu trang.Thay đổi vị trí thanh cuộn
Trả lời
Bạn có thể tính toán tỷ lệ phần trăm của vị trí hiện tại của scrollbar bằng cách sử dụng sự kiện onscroll, và nếu nó đạt đến 50% các vị trí cuộn có thể được thiết lập để phía trên cùng của trang có scrollTo chức năng:
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);
}
};
};
Bạn có thể kiểm tra ví dụ của tôi here.
Yup, tôi đã xem nó một vài lần. Dưới đây là một số mã JS:
window.scrollBy (0,50)
50 là số lượng pixel bạn muốn cuộn.
(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop) phải cung cấp cho bạn vị trí cuộn hiện tại trong bất kỳ trình duyệt nào.
Ba chức năng cuộn mà bạn muốn tự quan tâm là window.scroll(x,y)
, window.scrollBy(dx,dy)
và window.scrollTo(x,y)
.
Như David đã đề cập, bạn cần vị trí cuộn để biết bạn đang ở đâu và sử dụng sự kiện window.onscroll
để kích hoạt tính toán này.
Những tính năng này có sẵn trên tất cả các trình duyệt hoặc một số tính năng phát hiện được yêu cầu không? –
- 1. Đặt vị trí thanh cuộn
- 2. vị trí lạ của thanh cuộn iScroll
- 3. Thay đổi kiểu thanh cuộn
- 4. Thanh cuộn vị trí của ListView với đệm
- 5. Độ mờ Div dựa trên vị trí thanh cuộn
- 6. Cách nhận và đặt vị trí thanh cuộn TChromium?
- 7. excel - vba - userform - khung - đặt vị trí thanh cuộn
- 8. Đặt vị trí cuộn
- 9. Thay đổi vị trí php.ini
- 10. Thay đổi vị trí node_modules
- 11. jQuery để thay đổi nội dung trong div dựa trên vị trí cuộn
- 12. Chrome nhớ vị trí cuộn
- 13. lấy cửa sổ cuộn hoặc vị trí cuộn trong y
- 14. CListCtrl: Cách duy trì vị trí cuộn?
- 15. Sự kiện thanh cuộn khi cuộn?
- 16. Cố định vị trí thanh bên với thanh cuộn riêng biệt?
- 17. JCheckbox thay đổi vị trí văn bản
- 18. Thay đổi vị trí path.expand (Win 7)
- 19. cách phát hiện thay đổi vị trí
- 20. Thay đổi .gitconfig vị trí trên Windows
- 21. Thay đổi vị trí nền bằng jQuery
- 22. Thay đổi vị trí thư mục EditorTemplates
- 23. thay đổi vị trí của UIImageView
- 24. Thay đổi vị trí trong Angular
- 25. Thay đổi vị trí của navigationItem.title
- 26. Cách thay đổi vị trí của grid.draw
- 27. Thay đổi vị trí của TFS Build
- 28. Cách thay đổi vị trí qmake PREFIX
- 29. Thay đổi vị trí của UITableViewCellEditingStyle
- 30. Làm thế nào để duy trì vị trí cuộn trong NSScrollView khi thay đổi tỷ lệ?
@CMS: Câu trả lời tuyệt vời! – Josh
window.scrollTo (0,0); không hoạt động với tôi trong chomre – SuperUberDuper