html中dom元素滚动条滚动控制小结详解

//编写一个scrollToTop函数 function scrollToTop(el){ if(!el){ el=container; } //原始值 let startTop=el.scrollTop; //最终值 let endTop=0; //生成一个动画控制函数 let scrollAnimationFn=doAnimation(startTop,endTop,300,el); //执行动画，每10ms执行一次 let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) }

为了适配滚动到底部我们需要修改一下动画停止的时机判断，修改后的 doAnimation() 函数如下：

function doAnimation(startValue,endValue,duration,el){ //使用闭包保存变量dy和step(每次动画滚动的距离) let dy=0; let step=(endValue-startValue)/(duration/10); return function(interval){ dy+=step; //这里改成使用绝对值判断 if(Math.abs(dy)>=Math.abs(endValue-startValue)){ clearInterval(interval); } el.scrollTop+=step; } }

最后我们再给 html 添加一个滚动到底部按钮：

<button onclick="scrollToTop()">滚动到顶部</button>

实现效果如下图：

滚动到指定元素

首先为html元素添加所需的按钮和输入框：

<input type="number" placeholder="请输入要滚动到的元素index" style="width: 200px;"/> <button onclick="scrollToElement()">滚动到指定元素</button>

添加一个滚动指定元素的动画执行函数：

function scrollToElement(containerEl,el){ if(!containerEl){ //父元素 containerEl=container; } if(!el){ //获取到要滚动到的元素 let input=document.getElementsByTagName('input')[0]; let+input.value; if(!input.value){+index; } el=document.getElementById(id); } let startTop=containerEl.scrollTop; let endTop=startTop+el.getBoundingClientRect().top; let scrollAnimationFn=doAnimation(startTop,endTop,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) }

实现效果如下：

使用scrollTo()实现

scrollTo(x,y) 的使用方法与 scrollTop 属性的使用方法基本一致，父元素的 scrollTo() 方法可以控制滚动条滚动到指定位置，实际上相当于设置 scrollTop 的值。举个例子说明一下：

//这里以y轴滚动为例 element.scrollTo(0,y); element.scrollTop=y; //上面两句的效果相同。

所以，使用 scrollTo() 方法控制滚动条与使用scrollTop基本一致，我们只需要简单修改 doAnimation() 函数，代码如下：

function doAnimation(startValue,endValue,duration,el){ //使用闭包保存变量dy和step(每次动画滚动的距离) let dy=0; let step=(endValue-startValue)/(duration/10); return function(interval){ dy+=step; if(Math.abs(dy)>=Math.abs(endValue-startValue)){ clearInterval(interval); } //el.scrollTop+=step;//这行代码修改为如下 el.scrollTo(0,el.scrollTop+step); } }

执行效果与使用 scrollTop 实现一致。

使用scrollBy()实现

基础实现

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!