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? –
@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