在設計一些網站的時候,考慮到使用者騰不開手,不想動的情況,就需要設計一個自動滾動的功能,我不提供gui介面的設計,只提供一個絲滑滾動的原始碼
let scrollPercentage = 0.02; // 這個變數就是一秒滾動這個滾動節點的視窗的百分之幾
let scrollState = false; // true為正在滾動
let scrollElement = document.documentElement; // 滾動節點
let toggleScroll = (() => { // 製造一個閉包避免變數汙染環境
let lastDistance = 0; // 滾動距離必須是整形,如果有小數則會被忽略,我就將小數存起來,然後取整
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; // 計算總滾動高度
let distance = Math.floor(lastDistance);
lastDistance -= distance; // 取整,小數留給下一幀
scrollElement.scrollTo({top: scrollElement.scrollTop + distance, behavior: "instant"}); // 立即滾動,避免css影響
lastTime = Date.now();
requestAnimationFrame(scroll); // 等待下一幀
}
return function() { // toggleScroll函式
scrollState = !scrollState;
if(scrollState) {
lastTime = Date.now();
requestAnimationFrame(scroll);
}
};
})()