[javascript]如何优雅的实现网页自动滚动
在设计一些网站的时候,考虑到用户腾不开手,不想动的情况,就需要设计一个自动滚动的功能,我不提供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);
}
};
})()
本文来自博客园,作者:月神的使者,转载请注明原文链接:https://www.cnblogs.com/dffxd/p/18281380