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()实现

基本实现

我们同样可以行使 scrollBy(x,y) 实现对转动条的节制，上面已经声名过， scrollBy() 要领是节制转动条转动指定间隔（留意不是位置）。行使scrollBy()可以很利便的实现转动到指定元素的需求，代码如下：

function scrollToElement(containerEl,el){ //由于getBoundingClientRect().top即为子元素顶部间隔父元素顶部的间隔，以是这个值就是子元素相对付父元素的偏移量，我们传入这个值到scrollBy中，即转动到指定元素 containerEl.scrollBy(0,el.getBoundingClientRect().top); }

转动到底部：

function scrollToBottom(containerEl){ let dy=containerEl.scrollHeight-containerEl.clientHeight; containerEl.scrollBy(0,dy); }

转动到顶部

function scrollToTop(containerEl){ let dy=-(containerEl.scrollHeight-containerEl.clientHeight); containerEl.scrollBy(0,dy); }

添加动画

这里我们修改一下动画天生的函数，由于这里我们 scrollBy() 的参数就是变量的偏移量，以是做出如下修改：

function scrollToBottom(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=containerEl.scrollHeight-containerEl.clientHeight; let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToTop(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=-(containerEl.scrollHeight-containerEl.clientHeight); let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } 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); } //dy即为偏移量 let dy=el.getBoundingClientRect().top； let scrollAnimationFn=doAnimation(dy，300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } /** * @description: * @param {type} * @return: */ function doAnimation(dy,duration,el){ //行使闭包生涯变量exe_dy和step等变量(每次动画转动的间隔) let exe_dy=0;//已经执行的偏移量 let step=dy/(duration/10); return function(interval){ exe_dy+=step; if(Math.abs(exe_dy)>=Math.abs(dy)){ clearInterval(interval); } el.scrollBy(0,step); } }

执行结果与行使 scrollTop 实现同等。

最后

以上:point_up_2:就是本身对dom转动条节制的具体总结和讲授，以及一些根基行使要领。

到此这篇关于html中dom元素转动条转动节制小结详解的文章就先容到这了,更多相干dom元素转动条转动内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：河北网）

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