您的位置：360文档中心› html中dom元素滚动条滚动控制小结详解

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

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

html中dom元素滚动条滚动控制⼩结详解
不知道⼤家有没有遇到过这样的需求，在某个dom元素中添加新的⼦元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要⾃动滚动到新添加的⼦元素的位置，如下图所⽰效果：
那么接下来我们⼀边学习⼀些dom元素滚动相关的知识点，⼀边实现⼀个上图的效果和⼀些其他滚动相关的功能。

需要了解的dom属性和⽅法 scrollTop、clientHeight和scrollHeight
scrollTop属性是⼀个描述容器元素内容的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
<!DOCTYPE html>
<html>
<head>
<title>滚动条设置详解</title>
<style>
#scroll_container{
height: 500px;
width: 500px;
overflow-y: scroll;
padding: 50px;
box-sizing: border-box;
}
.scroll_item{
height: 200px;
width: 500px;
margin-top: 20px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="scroll_container">
<div id="scroll_container">
<div id="item1" class="scroll_item">
<span>1</span>
</div>
<div id="item2" class="scroll_item">
<span>2</span>
</div>
<div id="item3" class="scroll_item">
<span>3</span>
</div>
<div id="item4" class="scroll_item">
<span>4</span>
</div>
<div id="item5" class="scroll_item">
<span>5</span>
</div>
</div>
<button onclick="addItem()">添加⼀个元素</button>
</div>
</body>
<script>
let container=document.getElementById("scroll_container");
let index=5;
//添加⼀个元素
function addItem(){
index+=1;
let item=`<div id="${'item'+index}" class="scroll_item">
<span>${index}</span>
</div>`;
container.innerHTML+=item;
setTimeout(()=>{
scrollToIndex();
})
}
</script>
</html>
上⾯的代码包含⼀个可滚动的区域，并可以为滚动区域添加元素，也可以滚动到指定的元素位置,⼤致效果如下图。

使⽤scrollTop实现
基础实现
之前已经说明过scrollTop的含义，我们可以通过修改容器元素scrollTop值来控制滚动条滚动。

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

了解了scrollTop的含义，我们就可以利⽤scrollTop来实现滚动条的控制，那么我们先实现⼀个滚动到底部的实现，为上⾯的代码添加⼀个scrollToBottom()的⽅法：
function scrollToBottom(){
let y=container.scrollHeight-container.clientHeight;
container.scrollTop=y;
}
对应的如果想要实现滚动到顶部我们只需要设置scrollTop为0即可：
function scrollToTop(){
container.scrollTop=0;
}
结合getBoundingClientRect()⽅法我们也可以轻松实现滚动到指定元素，其中getBoundingClientRect().top表⽰⼦元素顶部距离⽗元素视⼝顶部的距离：
function scrollToElement(el){
container.scrollTop+=el.getBoundingClientRect().top;
}
添加动画
滚动到底部
但是上⾯代码的滚动未免太⽣硬了，我们可以为它添加⼀下动画效果，可以借助setInterval()实现⼀下。

分析⼀下实现动画效果的过程，动画的实现⽆外乎是把⼀个变量的变化在⼀定的时间内完成，因此我们⾸先需要知道两个变量，变量（scrollTop）偏移量和变化所需时间，⽽偏移量就是scrollTop的最终值减去原始值，变化时长⼀般设置成可以修改的参数。

了解了以上过程，我们先以滚动到底部为例：
//⾸先编写⼀个scrollToBottom函数
function scrollToBottom(el){
if(!el){
el=container;
}
//原始值
let startTop=el.scrollTop;
//最终值
let endTop=el.scrollHeight-el.clientHeight;
//⽣成⼀个动画控制函数
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);
}
el.scrollTop+=step;
}
}
修改addItem函数添加滚动到底部动画：
function addItem(){
index+=1;
let item=`<div id="${'item'+index}" class="scroll_item"> <span>${index}</span>
</div>`;
container.innerHTML+=item;
setTimeout(()=>{
// scrollToIndex();
scrollToBottom(container);
})
}
然后为html加⼊⼀个滚动到底部的按钮：
<button onclick="scrollToBottom()">滚动到底部</button>
滚动到顶部
按照上⾯的⽅法也可以实现⼀个常⽤的带动画滚动到顶部：
//编写⼀个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 id='item'+input.value;
if(!input.value){
id='item'+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 id='item'+input.value;
if(!input.value){
id='item'+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元素滚动条滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

相关文档
最新文档