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

2023年6月20日发(作者：)

html中dom元素滚动条滚动控制⼩结详解不知道⼤家有没有遇到过这样的需求，在某个

dom 元素中添加新的⼦元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要⾃动滚动到新添加的⼦元素的位置，如下图所⽰效果：那么接下来我们⼀边学习⼀些

dom 元素滚动相关的知识点，⼀边实现⼀个上图的效果和⼀些其他滚动相关的功能。需要了解的dom属性和⽅法 scrollTop、clientHeight和scrollHeightscrollTop 属性是⼀个描述容器元素内容的top值与容器元素(

viewport )视⼝顶部

top 值之间的差值，即容器中内容向上滑动后超出容器视⼝的部分。可以通过修改此属性控制滚动状态。clientHeight 是描述容器⾼度的

dom 属性。scrollHeight 是描述容器内容⾼度的

dom 属性。三个属性的关系如下图所⽰：getBoundingClientRect()此⽅法⽤来获取元素布局所需的⼀些⼏何属性，⽐如

left 、

right 、

top 、

bottom 、

height 、

width 等。srollBy(x,y)dom 容器的

scrollTo ⽅法可以⽤来直接控制滚动条滚动指定的距离。当需要滚动到指定元素时，使⽤此⽅法⽐较⽅便。srollTo(x,y)dom 容器的

scrollTo ⽅法可以⽤来直接控制滚动条滚动到指定位置。在控制滚动条滚动到顶部或者底部的时候使⽤此⽅法⽐较⽅便。实现滚动控制 准备我们先准备⼀个

html

上⾯的代码包含⼀个可滚动的区域，并可以为滚动区域添加元素，也可以滚动到指定的元素位置,⼤致效果如下图。使⽤scrollTop实现基础实现之前已经说明过

scrollTop 的含义，我们可以通过修改容器元素

scrollTop 值来控制滚动条滚动。

scrollTop 的值越⼤，滚动条相对于原始状态（scrollTop 为0时）的滚动距离越⼤。了解了

scrollTop 的含义，我们就可以利⽤

scrollTop 来实现滚动条的控制，那么我们先实现⼀个滚动到底部的实现，为上⾯的代码添加⼀个scrollToBottom() 的⽅法：function scrollToBottom(){ let y=Height; Top=y;}对应的如果想要实现滚动到顶部我们只需要设置

scrollTop 为0即可：function scrollToTop(){ Top=0;}

结合

getBoundingClientRect() ⽅法我们也可以轻松实现滚动到指定元素，其中

getBoundingClientRect().top 表⽰⼦元素顶部距离⽗元素视⼝顶部的距离：function scrollToElement(el){ Top+=ndingClientRect().top;}添加动画滚动到底部但是上⾯代码的滚动未免太⽣硬了，我们可以为它添加⼀下动画效果，可以借助

setInterval() 实现⼀下。分析⼀下实现动画效果的过程，动画的实现⽆外乎是把⼀个变量的变化在⼀定的时间内完成，因此我们⾸先需要知道两个变量，变量（

scrollTop ）偏移量和变化所需时间，⽽偏移量就是

scrollTop 的最终值减去原始值，变化时长⼀般设置成可以修改的参数。了解了以上过程，我们先以滚动到底部为例：//⾸先编写⼀个scrollToBottom函数function scrollToBottom(el){ if(!el){ el=container; } //原始值 let startTop=Top; //最终值 let endTop=Height; //⽣成⼀个动画控制函数 let scrollAnimationFn=doAnimation(startTop,endTop,300,el); //执⾏动画，每10ms执⾏⼀次 let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) }/** * @description: ⼀个⽣成动画控制函数的⼯⼚函数（使⽤闭包） * @param { startValue:变量原始值 endValue:变量最终值 duration:动画时长 el:执⾏滚动动画的元素 }

* @return: null */function doAnimation(startValue,endValue,duration,el){ //使⽤闭包保存变量dy和step(每次动画滚动的距离) let dy=0; let step=(endValue-startValue)/(duration/10); //返回动画控制函数 return function(interval){ dy+=step; if(dy>=endValue-startValue){ clearInterval(interval); } Top+=step; } }修改addItem函数添加滚动到底部动画：function addItem(){ index+=1; let item=`

`; TML+=item;

setTimeout(()=>{ // scrollToIndex(); scrollToBottom(container); })

}然后为html加⼊⼀个滚动到底部的按钮：滚动到底部滚动到顶部按照上⾯的⽅法也可以实现⼀个常⽤的带动画滚动到顶部：//编写⼀个scrollToTop函数function scrollToTop(el){ if(!el){ el=container; } //原始值 let startTop=Top; //最终值 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((dy)>=(endValue-startValue)){ clearInterval(interval); } Top+=step; } }最后我们再给

html 添加⼀个滚动到底部按钮：滚动到顶部实现效果如下图：滚动到指定元素⾸先为html元素添加所需的按钮和输⼊框：滚动到指定元素添加⼀个滚动指定元素的动画执⾏函数：function scrollToElement(containerEl,el){ if(!containerEl){ //⽗元素 containerEl=container; } if(!el){ //获取到要滚动到的元素 let input=mentsByTagName('input')[0]; let id='item'+; if(!){ id='item'+index; } el=mentById(id); } let startTop=Top; let endTop=startTop+ndingClientRect().top; let scrollAnimationFn=doAnimation(startTop,endTop,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10)}实现效果如下：使⽤scrollTo()实现scrollTo(x,y) 的使⽤⽅法与

scrollTop 属性的使⽤⽅法基本⼀致，⽗元素的

scrollTo() ⽅法可以控制滚动条滚动到指定位置，实际上相当于设置scrollTop 的值。举个例⼦说明⼀下：//这⾥以y轴滚动为例To(0,y);Top=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((dy)>=(endValue-startValue)){ clearInterval(interval); } //Top+=step;//这⾏代码修改为如下 To(0,Top+step); }}执⾏效果与使⽤

scrollTop 实现⼀致。使⽤scrollBy()实现基础实现我们同样可以使⽤

scrollBy(x,y) 实现对滚动条的控制，上⾯已经说明过，

scrollBy() ⽅法是控制滚动条滚动指定距离（注意不是位置）。使⽤scrollBy()可以很⽅便的实现滚动到指定元素的需求，代码如下：function scrollToElement(containerEl,el){ //因为getBoundingClientRect().top即为⼦元素顶部距离⽗元素顶部的距离，所以这个值就是⼦元素相对于⽗元素的偏移量，我们传⼊这个值到scrollBy中，即滚动到指定元素 By(0,ndingClientRect().top);}滚动到底部：function scrollToBottom(containerEl){ let dy=Height; By(0,dy);}滚动到顶部function scrollToTop(containerEl){ let dy=-(Height); By(0,dy);}添加动画这⾥我们修改⼀下动画⽣成的函数，因为这⾥我们

scrollBy() 的参数就是变量的偏移量，所以做出如下修改：function scrollToBottom(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=Height; let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToTop(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=-(Height); let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToElement(containerEl,el){ if(!containerEl){ containerEl=container; } if(!el){ let input=mentsByTagName('input')[0]; let id='item'+; if(!){ id='item'+index; } el=mentById(id); } //dy即为偏移量 let dy=ndingClientRect().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((exe_dy)>=(dy)){ clearInterval(interval); } By(0,step); } }执⾏效果与使⽤

scrollTop 实现⼀致。最后以上:point_up_2:就是⾃⼰对dom滚动条控制的详细总结和讲解，以及⼀些基本使⽤⽅法。到此这篇关于html中dom元素滚动条滚动控制⼩结详解的⽂章就介绍到这了,更多相关dom元素滚动条滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

2023年6月20日发(作者：)

html中dom元素滚动条滚动控制⼩结详解不知道⼤家有没有遇到过这样的需求，在某个

dom 元素中添加新的⼦元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要⾃动滚动到新添加的⼦元素的位置，如下图所⽰效果：那么接下来我们⼀边学习⼀些

dom 元素滚动相关的知识点，⼀边实现⼀个上图的效果和⼀些其他滚动相关的功能。需要了解的dom属性和⽅法 scrollTop、clientHeight和scrollHeightscrollTop 属性是⼀个描述容器元素内容的top值与容器元素(

viewport )视⼝顶部

top 值之间的差值，即容器中内容向上滑动后超出容器视⼝的部分。可以通过修改此属性控制滚动状态。clientHeight 是描述容器⾼度的

dom 属性。scrollHeight 是描述容器内容⾼度的

dom 属性。三个属性的关系如下图所⽰：getBoundingClientRect()此⽅法⽤来获取元素布局所需的⼀些⼏何属性，⽐如

left 、

right 、

top 、

bottom 、

height 、

width 等。srollBy(x,y)dom 容器的

scrollTo ⽅法可以⽤来直接控制滚动条滚动指定的距离。当需要滚动到指定元素时，使⽤此⽅法⽐较⽅便。srollTo(x,y)dom 容器的

scrollTo ⽅法可以⽤来直接控制滚动条滚动到指定位置。在控制滚动条滚动到顶部或者底部的时候使⽤此⽅法⽐较⽅便。实现滚动控制 准备我们先准备⼀个

html

上⾯的代码包含⼀个可滚动的区域，并可以为滚动区域添加元素，也可以滚动到指定的元素位置,⼤致效果如下图。使⽤scrollTop实现基础实现之前已经说明过

scrollTop 的含义，我们可以通过修改容器元素

scrollTop 值来控制滚动条滚动。

scrollTop 的值越⼤，滚动条相对于原始状态（scrollTop 为0时）的滚动距离越⼤。了解了

scrollTop 的含义，我们就可以利⽤

scrollTop 来实现滚动条的控制，那么我们先实现⼀个滚动到底部的实现，为上⾯的代码添加⼀个scrollToBottom() 的⽅法：function scrollToBottom(){ let y=Height; Top=y;}对应的如果想要实现滚动到顶部我们只需要设置

scrollTop 为0即可：function scrollToTop(){ Top=0;}

结合

getBoundingClientRect() ⽅法我们也可以轻松实现滚动到指定元素，其中

getBoundingClientRect().top 表⽰⼦元素顶部距离⽗元素视⼝顶部的距离：function scrollToElement(el){ Top+=ndingClientRect().top;}添加动画滚动到底部但是上⾯代码的滚动未免太⽣硬了，我们可以为它添加⼀下动画效果，可以借助

setInterval() 实现⼀下。分析⼀下实现动画效果的过程，动画的实现⽆外乎是把⼀个变量的变化在⼀定的时间内完成，因此我们⾸先需要知道两个变量，变量（

scrollTop ）偏移量和变化所需时间，⽽偏移量就是

scrollTop 的最终值减去原始值，变化时长⼀般设置成可以修改的参数。了解了以上过程，我们先以滚动到底部为例：//⾸先编写⼀个scrollToBottom函数function scrollToBottom(el){ if(!el){ el=container; } //原始值 let startTop=Top; //最终值 let endTop=Height; //⽣成⼀个动画控制函数 let scrollAnimationFn=doAnimation(startTop,endTop,300,el); //执⾏动画，每10ms执⾏⼀次 let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) }/** * @description: ⼀个⽣成动画控制函数的⼯⼚函数（使⽤闭包） * @param { startValue:变量原始值 endValue:变量最终值 duration:动画时长 el:执⾏滚动动画的元素 }

* @return: null */function doAnimation(startValue,endValue,duration,el){ //使⽤闭包保存变量dy和step(每次动画滚动的距离) let dy=0; let step=(endValue-startValue)/(duration/10); //返回动画控制函数 return function(interval){ dy+=step; if(dy>=endValue-startValue){ clearInterval(interval); } Top+=step; } }修改addItem函数添加滚动到底部动画：function addItem(){ index+=1; let item=`

`; TML+=item;

setTimeout(()=>{ // scrollToIndex(); scrollToBottom(container); })

}然后为html加⼊⼀个滚动到底部的按钮：滚动到底部滚动到顶部按照上⾯的⽅法也可以实现⼀个常⽤的带动画滚动到顶部：//编写⼀个scrollToTop函数function scrollToTop(el){ if(!el){ el=container; } //原始值 let startTop=Top; //最终值 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((dy)>=(endValue-startValue)){ clearInterval(interval); } Top+=step; } }最后我们再给

html 添加⼀个滚动到底部按钮：滚动到顶部实现效果如下图：滚动到指定元素⾸先为html元素添加所需的按钮和输⼊框：滚动到指定元素添加⼀个滚动指定元素的动画执⾏函数：function scrollToElement(containerEl,el){ if(!containerEl){ //⽗元素 containerEl=container; } if(!el){ //获取到要滚动到的元素 let input=mentsByTagName('input')[0]; let id='item'+; if(!){ id='item'+index; } el=mentById(id); } let startTop=Top; let endTop=startTop+ndingClientRect().top; let scrollAnimationFn=doAnimation(startTop,endTop,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10)}实现效果如下：使⽤scrollTo()实现scrollTo(x,y) 的使⽤⽅法与

scrollTop 属性的使⽤⽅法基本⼀致，⽗元素的

scrollTo() ⽅法可以控制滚动条滚动到指定位置，实际上相当于设置scrollTop 的值。举个例⼦说明⼀下：//这⾥以y轴滚动为例To(0,y);Top=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((dy)>=(endValue-startValue)){ clearInterval(interval); } //Top+=step;//这⾏代码修改为如下 To(0,Top+step); }}执⾏效果与使⽤

scrollTop 实现⼀致。使⽤scrollBy()实现基础实现我们同样可以使⽤

scrollBy(x,y) 实现对滚动条的控制，上⾯已经说明过，

scrollBy() ⽅法是控制滚动条滚动指定距离（注意不是位置）。使⽤scrollBy()可以很⽅便的实现滚动到指定元素的需求，代码如下：function scrollToElement(containerEl,el){ //因为getBoundingClientRect().top即为⼦元素顶部距离⽗元素顶部的距离，所以这个值就是⼦元素相对于⽗元素的偏移量，我们传⼊这个值到scrollBy中，即滚动到指定元素 By(0,ndingClientRect().top);}滚动到底部：function scrollToBottom(containerEl){ let dy=Height; By(0,dy);}滚动到顶部function scrollToTop(containerEl){ let dy=-(Height); By(0,dy);}添加动画这⾥我们修改⼀下动画⽣成的函数，因为这⾥我们

scrollBy() 的参数就是变量的偏移量，所以做出如下修改：function scrollToBottom(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=Height; let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToTop(containerEl){ if(!containerEl){ containerEl=container; } //dy即为偏移量 let dy=-(Height); let scrollAnimationFn=doAnimation(dy,300,containerEl); let interval=setInterval(()=>{ scrollAnimationFn(interval) },10) } function scrollToElement(containerEl,el){ if(!containerEl){ containerEl=container; } if(!el){ let input=mentsByTagName('input')[0]; let id='item'+; if(!){ id='item'+index; } el=mentById(id); } //dy即为偏移量 let dy=ndingClientRect().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((exe_dy)>=(dy)){ clearInterval(interval); } By(0,step); } }执⾏效果与使⽤

scrollTop 实现⼀致。最后以上:point_up_2:就是⾃⼰对dom滚动条控制的详细总结和讲解，以及⼀些基本使⽤⽅法。到此这篇关于html中dom元素滚动条滚动控制⼩结详解的⽂章就介绍到这了,更多相关dom元素滚动条滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！