html中dom元素翻转条翻转操纵小结详解

不知道道大伙儿有木有遇到过这样的要求,在某个 dom 元素中加上新的子元素,随后规定假如新加上的新元素超过器皿的范畴,那末大家必须全自动翻转到新加上的子元素的部位,以下图所示实际效果:

那末接下来大家1边学习培训1些 dom 元素翻转有关的专业知识点,1边完成1个上图的实际效果和1些别的翻转有关的作用。

必须掌握的dom特性和方式 scrollTop、clientHeight和scrollHeight

scrollTop 特性是1个叙述器皿元素內容的top值与器皿元素( viewport )视口顶部 top 值之间的差值,即器皿中內容向上拖动后超过器皿视口的一部分。能够根据改动此特性操纵翻转情况。

clientHeight 是叙述器皿高宽比的 dom 特性。

scrollHeight 是叙述器皿內容高宽比的 dom 特性。

3个特性的关联以下图所示:

getBoundingClientRect()

此方式用来获得元素合理布局所需的1些几何图形特性,例如 leftrighttopbottomheightwidth 等。

srollBy(x,y)

dom 器皿的 scrollTo 方式能够用来立即操纵翻转条翻转特定的间距。当必须翻转到特定元素时,应用此方式较为便捷。

srollTo(x,y)

dom 器皿的 scrollTo 方式能够用来立即操纵翻转条翻转到特定部位。在操纵翻转条翻转到顶部或底部的情况下应用此方式较为便捷。

完成翻转操纵 提前准备

大家先提前准备1个 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()">加上1个元素</button>
       </div>
    </body>
    <script>
        let container=document.getElementById("scroll_container");
        let index=5;
        //加上1个元素
        function addItem(){
            index+=1;
            let item=`<div id="${'item'+index}" class="scroll_item">
                            <span>${index}</span>
                        </div>`;
            container.innerHTML+=item;  
            setTimeout(()=>{
                scrollToIndex();
            })
         }
    </script>
</html>

上面的编码包括1个可翻转的地区,并能够为翻转地区加上元素,还可以翻转到特定的元素部位,大概实际效果以下图。

应用scrollTop完成

基本完成

以前早已表明过 scrollTop 的含意,大家能够根据改动器皿元素 scrollTop 值来操纵翻转条翻转。 scrollTop 的值越大,翻转条相对初始情况( scrollTop 为0时)的翻转间距越大。

掌握了 scrollTop 的含意,大家便可以运用 scrollTop 来完成翻转条的操纵,那末大家先完成1个翻转究竟部的完成,为上面的编码加上1个 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;
}

加上动漫

翻转究竟部

可是上面编码的翻转未免太生涩了,大家能够为它加上1下动漫实际效果,能够依靠 setInterval() 完成1下。剖析1下完成动漫实际效果的全过程,动漫的完成无外乎是把1个自变量的转变在1定的時间内进行,因而大家最先必须了解两个自变量,自变量( scrollTop )偏位量和转变所需時间,而偏位量便是 scrollTop 的最后值减去初始值,转变时长1般设定成能够改动的主要参数。掌握了以上全过程,大家先以翻转究竟部为例:

//最先撰写1个scrollToBottom涵数
function scrollToBottom(el){
              if(!el){
                  el=container;
              }
              //初始值
              let startTop=el.scrollTop;
              //最后值
              let endTop=el.scrollHeight-el.clientHeight;
              //转化成1个动漫操纵涵数
              let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              //实行动漫,每10ms实行1次
              let interval=setInterval(()=>{
                scrollAnimationFn(interval)
              },10)
 }
/**
 * @description: 1个转化成动漫操纵涵数的加工厂涵数(应用闭包)
 * @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添加1个翻转究竟部的按钮:

<button onclick="scrollToBottom()">翻转究竟部</button>

翻转到顶部

依照上面的方式还可以完成1个常见的带动漫翻转到顶部:

//撰写1个scrollToTop涵数
function scrollToTop(el){
              if(!el){
                  el=container;
              }
              //初始值
              let startTop=el.scrollTop;
              //最后值
              let endTop=0;
              //转化成1个动漫操纵涵数
              let scrollAnimationFn=doAnimation(startTop,endTop,300,el);
              //实行动漫,每10ms实行1次
              let interval=setInterval(()=>{
                scrollAnimationFn(interval)
              },10)
 }

以便兼容翻转究竟部大家必须改动1下动漫终止的机会分辨,改动后的 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 加上1个翻转究竟部按钮:

<button onclick="scrollToTop()">翻转到顶部</button>

完成实际效果以下图:

翻转到特定元素

最先为html元素加上所需的按钮和键入框:

<input type="number" placeholder="请键入要翻转到的元素index" style="width: 200px;"/>
<button onclick="scrollToElement()">翻转到特定元素</button>

加上1个翻转特定元素的动漫实行涵数:

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 特性的应用方式基础1致,父元素的 scrollTo() 方式能够操纵翻转条翻转到特定部位,具体上非常于设定 scrollTop 的值。举个事例表明1下:

//这里以y轴翻转为例
element.scrollTo(0,y);
element.scrollTop=y;
//上面两句的实际效果同样。

因此,应用 scrollTo() 方式操纵翻转条与应用scrollTop基础1致,大家只必须简易改动 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 完成1致。

应用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);
}

加上动漫

这里大家改动1下动漫转化成的涵数,由于这里大家 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 完成1致。

最终

以上:point_up_2:便是自身对dom翻转条操纵的详尽总结和解读,和1些基础应用方式。

到此这篇有关html中dom元素翻转条翻转操纵小结详解的文章内容就详细介绍到这了,更多有关dom元素翻转条翻转內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!