[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);
		}
	};
})()
posted @ 2024-07-07 13:05  月神的使者  阅读(89)  评论(0编辑  收藏  举报