[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
标签:
javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)