当前位置：网站首页>Native JS implements page scroll bar loading data and page drop-down loading content

Native JS implements page scroll bar loading data and page drop-down loading content

2022-06-27 10:39:00 【Cut potatoes into shreds】

One 、 Preface

Today's case is Scroll bar events , When the distance between the scroll bar and the bottom is less than a range value , Will automatically increase the height of the page , So as to achieve the effect of never drawing to the bottom .

Two 、scrollHeight、scrollTop and clientHeight The difference between

$document.documentElement.scrollHeight{\color{Red} }$ Full text height of web page

Distance from the top of the scroll bar （ The distance the scroll bar is rolled away ）

The height of the screen you can see

because js They didn't give it to us The distance of the scroll bar from the bottom We need to calculate by ourselves use Full text height of web page subtract Distance from the top of the scroll bar Subtract the height of the screen you can see to get The distance of the scroll bar from the bottom 了 .

3、 ... and 、 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(){
            // The full text of the web page is high 
           var pageHeight = document.documentElement.scrollHeight;
           // The distance the scroll bar is rolled away 
           var stop = document.documentElement.scrollTop; 
           // The height of the screen you can see 
           var seeHeight = document.documentElement.clientHeight;
           // Distance from the bottom 
           var bottom1 = pageHeight - stop - seeHeight;
        //    console.log(" Distance from the bottom "+ bottom1)
        //    console.log(" The full text of the web page is high "+pageHeight)
        //    console.log(" The distance the scroll bar is rolled away "+stop)
        //    console.log(" The height of the screen you can see "+seeHeight)
        //    console.log("---------")
           // When the scroll bar is less than... From the bottom 200 It's triggered when 
           if(bottom1<=200){
                offsetx+=step;
                body1.style.paddingBottom = offsetx +"px";
                // alert(" load ")
                // document.write('111111111111111111111111')
           }
        //console.log(e)
        }
    </script>

This is recorded for future use , I also hope the big guys can communicate more , Leave more messages , Point out my shortcomings ！

You can study it if you need it ！！

原网站

版权声明
本文为[Cut potatoes into shreds]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202161655366963.html

当前位置：网站首页>Native JS implements page scroll bar loading data and page drop-down loading content

Native JS implements page scroll bar loading data and page drop-down loading content

边栏推荐

猜你喜欢

随机推荐