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()实现 基础实现 (编辑:惠州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |