[javascript]如何優(yōu)雅的實(shí)現(xiàn)網(wǎng)頁自動滾動
在設(shè)計(jì)一些網(wǎng)站的時候,考慮到用戶騰不開手,不想動的情況,就需要設(shè)計(jì)一個自動滾動的功能,我不提供gui界面的設(shè)計(jì),只提供一個絲滑滾動的源碼
let scrollPercentage = 0.02; // 這個變量就是一秒滾動這個滾動節(jié)點(diǎn)的視窗的百分之幾
let scrollState = false; // true為正在滾動
let scrollElement = document.documentElement; // 滾動節(jié)點(diǎn)
let toggleScroll = (() => { // 制造一個閉包避免變量污染環(huán)境
let lastDistance = 0; // 滾動距離必須是整形,如果有小數(shù)則會被忽略,我就將小數(shù)存起來,然后取整
let lastTime = 0;
function scroll() {
if(!scrollState) { // 取消后停止
return;
}
let height = Math.min(window.innerHeight, scrollElement.getBoundingClientRect().height); // 視窗高度
let time = (Date.now() - lastTime) / 1000; // 過了幾秒
lastDistance += height * scrollPercentage * time; // 計(jì)算總滾動高度
let distance = Math.floor(lastDistance);
lastDistance -= distance; // 取整,小數(shù)留給下一幀
scrollElement.scrollTo({top: scrollElement.scrollTop + distance, behavior: "instant"}); // 立即滾動,避免css影響
lastTime = Date.now();
requestAnimationFrame(scroll); // 等待下一幀
}
return function() { // toggleScroll函數(shù)
scrollState = !scrollState;
if(scrollState) {
lastTime = Date.now();
requestAnimationFrame(scroll);
}
};
})()
本文來自博客園,作者:月神的使者,轉(zhuǎn)載請注明原文鏈接:http://www.rzrgm.cn/dffxd/p/18281380

浙公網(wǎng)安備 33010602011771號