在设计一些网站的时候,考虑到用户腾不开手,不想动的情况,就需要设计一个自动滚动的功能,我不提供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);}};
})()