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

使用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元素滚动条滚动内容请搜索站长课堂以前的文章或继续浏览下面的相关文章，希望大家以后多多支持站长课堂!