首页 > 编程语言 >[javascript]如何优雅的实现网页自动滚动

[javascript]如何优雅的实现网页自动滚动

时间:2024-07-07 13:08:26浏览次数:22  
标签:网页 lastDistance javascript 优雅 let 滚动 lastTime scrollElement scrollState

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

标签:网页,lastDistance,javascript,优雅,let,滚动,lastTime,scrollElement,scrollState
From: https://www.cnblogs.com/dffxd/p/18281380

相关文章

  • 编写优雅Python代码的20个最佳实践
    想要让你的代码像艺术品一样既实用又赏心悦目吗?今天我们就来聊聊如何通过20个小技巧,让你的Python代码从平凡走向优雅,让同行看了都忍不住点赞!**温馨提示:更多的编程资料,领取方式在:1.拥抱PEP8实践:遵循PEP8编码规范,比如行宽不超过79字符,使用空格而不是制表符缩进。......
  • Power BI实用技巧——批量爬取网页数据
    PowerBI实用技巧——批量爬取网页数据     假设我是个电商公司老板,我的公司最近要上架一款新产品,我需要你来帮我做一个竞品分析,同类型产品的评分、价格、销量、市场占有率最高的品牌详情,来帮助我进行前期宣发,这个时候最让你一筹莫展的环节是什么?我猜是数据从哪来?竞争对手......
  • ChatGPT对话:Python程序自动模拟操作网页,无法弹出下拉列表框
    【编者按】需要编写Python程序自动模拟操作网页。编者有编程经验,但没有前端编程经验,完全不知道如何编写这种程序。通过与ChatGPT讨论,1天完成了任务。因为没有这类程序的编程经验,需要边学习,边编程,遇到问题再网上查资料。如果没有ChatGPT,估计至少需要5天时间。从登录开始模拟......
  • Javascript中Object、Array、String
    Object在JavaScript中,Object 类型是一种复杂的数据类型,用于存储键值对集合。它提供了多种方法来操作这些键值对,以及执行其他常见的操作。这里,我列出了一些 Object 类型的常见方法或特性,它们在日常编程中非常有用:属性访问点符号(.):如果属性名是一个有效的标识符(例如,没有空格......
  • 如何将pdf转成html?PDF转HTML网页的3个方法
    怎么把pdf转化成html?我们在查看一些文件的时候会遇到查看失败或是无法打开的情况,发送的时候也可能会出现这样或那样的问题,其实我们可以将PDF文件转换成HTML格式,在该格式下文件打开和加载的速度很快,而且能不受到软件的制约,直接在网页上就能查看,与此同时还能方便文件的共享访问,只需......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript学校网站(成都大学)
    HTML+CSS+JS【学校网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 温故而知新,详细讲讲JavaScript的防抖与节流
    前言:哈喽,大家好,我是前端菜鸟的自我修养!今天给大家详细讲讲JavaScript的防抖与节流,包含二者的区别与优缺点、使用场景,并提供具体代码帮助大家深入理解,彻底掌握!原创不易,如果能帮助到带大家,欢迎收藏+关注哦......
  • 用Html的基本骨架展现一个基本网页
    目录一.前言二.html的定义三.html的基本骨架 四.简单网页的生成一.前言    在进行了开发环境的配置后,我们就可以开始编写Html的代码了。下面则是介绍下如何用html来进行一个网页的展示以及html的定义。二.html的定义    首先我们需要知道html到底......
  • JavaScript中的异步模式
    JavaScript中的异步模式JavaScript语言的执行环境是“单线程(singlethread)”,就是指一次只能完成一个任务。如果有多个任务,就必须排队,等前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯,坏处是只要有一个任务耗时很长,后面的任务......
  • javascript url 传递参数中文乱码问题解决方案
    在JavaScript中,传递URL参数时,如果参数包含中文字符,可能会出现乱码问题。解决这一问题可以使用encodeURIComponent和decodeURIComponent函数。这些函数会对URL参数进行编码和解码,确保特殊字符(包括中文字符)能够被正确传递和解析。以下是一个完整的解决方案示例: 1.......