Analyzing native js scroll bar to scroll to an area of the bottom

Analyzing native js scroll bar to scroll to an area of ​​the bottom

Explain == "

Relations formula: element.scrollHeight - element.scrollTop === element.clientHeight
Explanation: This formula can be used to determine whether the scroll in the end
you have to know that this method can determine the scroll bar to scroll to the bottom of the Ha!

element.scrollHeight is to get the actual height of the element region (containing hidden height)
element.scrollTop is to get the scroll bar from the top of the actual distance (containing hidden height)
element.clientHeight: is the internal elements (visible height) + itself padding

In the life cycle of the rolling elements to function in the region registered a scroll event
element.addEventListener ( 'scroll', this.doSomething) ;

  <div id="app">
         <div class="box" id="box"> 
            <div class="demo" v-for="(item,index) in condata" :key="index">{{item}}</div>
         </div>
   </div>

  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
        data() {
            return {
                condata:["121212","121212","121212","121212","121212","121212","121212","121212",
               "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212",
               "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","121212",
              "121212","121212","121212","121212","121212","121212","121212","121212","最后一条数据了",
              ],
              boxScrollpositionHeight:0,
              boxElement:"",
              boxscrollPosition:0,//滚动条所在的高度()
            }
        },
        mounted () {
             this.boxElement=document.getElementById("box"); 
            
            this.boxElement.addEventListener('scroll', this.doSomething);
            
            // 获取滚动条滚动区域盒子的高度
            
            this.boxScrollpositionHeight=this.boxElement.offsetHeight;
            console.log("div内容区域的实际高度",this.boxElement.scrollHeight)
        },
        methods: {
            doSomething(){
             
                //此时滚动条所在的高度 
                let scrollcurHeight=this.boxElement.scrollTop;
                
                
                console.log("滚动条距离顶部的实际高度",this.boxElement.scrollTop)
                console.log("hah",this.boxElement.clientHeight)
                
                
                // 关系公式：element.scrollHeight - element.scrollTop === element.clientHeight
                // 解释：此公式可以用于判断是否滚动到底
　　
                    
                if(this.boxElement.scrollHeight-this.boxElement.scrollTop===this.boxElement.clientHeight){
                    console.log("滚动到底部了",)
                } 
            }
         },
        beforeDestroy() {
            let boxscrollPosition=document.getElementById("box");
            boxscrollPosition.removeEventListener('scroll', this.doSomething);
        },
    })
  </script>

  <style type="text/css">
      *{
          padding: 0;
          margin: 0;
      }
      body,html,#app{
          height: 100%;
      }
    .box{
         width: 300px;
         height: calc(100% - 279px);
         background: #0366D6;
         overflow: hidden;
         overflow-y: auto;
        }
        
        .demo{
            height: 30px;
            line-height: 30px;
            border-top:1px solid #ccc;
        }
        
  </style>