Native JS implements the page scroll bar to load data, and the page to pull down to load content

I. Introduction

Today's case is a scroll bar event . When the distance between the scroll bar and the bottom is less than a range value, the height of the page will be automatically increased, so as to achieve the effect that the bottom will never be drawn.

2. The difference between scrollHeight , scrollTop and clientHeight

$document.documentElement.scrollHeight{\color{Red} }$ The full text of the page is high

$document.documentElement.scrollTop$ The distance from the scroll bar to the top (the distance the scroll bar is rolled away)

$document.documentElement.clientHeight$ Visible screen height

Since js does not give us the distance from the scroll bar to the bottom, we need to calculate the distance from the bottom of the scroll bar by subtracting the distance from the top of the scroll bar to the height of the visible screen by subtracting the height of the full text of the web page .

3. Code

<style>
      body{
          padding-top: 2000px;
      }
  </style>
<body>
    <script>
        var body1 = document.getElementsByTagName("body")[0];
        var step = 500;
        var offsetx =0;
        console.log(body1);
        // body1.style.paddingBottom = 0;
        // body1.style.paddingBottom =offsetx;
        window.onscroll = function(){
            //网页全文高
           var pageHeight = document.documentElement.scrollHeight;
           //滚动条被卷去的距离
           var stop = document.documentElement.scrollTop; 
           //可以看到的屏幕高度
           var seeHeight = document.documentElement.clientHeight;
           //距离底部的距离
           var bottom1 = pageHeight - stop - seeHeight;
        //    console.log("距离底部的距离"+ bottom1)
        //    console.log("网页全文高"+pageHeight)
        //    console.log("滚动条被卷去的距离"+stop)
        //    console.log("可以看到的屏幕高度"+seeHeight)
        //    console.log("---------")
           //当滚动条距离距离底部小于200的时候就触发
           if(bottom1<=200){
                offsetx+=step;
                body1.style.paddingBottom = offsetx +"px";
                // alert("加载")
                // document.write('111111111111111111111111')
           }
        //console.log(e)
        }
    </script>

This is recorded for the convenience of future use, and I hope that the big guys can communicate more, leave a lot of messages, and point out my shortcomings!

Friends in need can do research! !

Native JS implements the page scroll bar to load data, and the page to pull down to load content

Guess you like