手机端分页

原理：通过js的scrollTop，clientHeight，scrollHeight三个属性加上onscroll事件来实现。

scrollTop：它返回当前元素相对于其 offsetParent 元素的顶部的距离。（HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。）。

clientHeight：元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度。

scrollHeight：是自身的高度+隐藏元素的高度（即是内层元素的offsetHeight）。

在js滚动事件判断如果滚动的高度（scrollTop）+元素可视区域高度（clientHeight）=scrollHeight，此时数据已经滚动到最底部开始加载下一页；

全部代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: #34495e;
                
            }
            .wrap{
                position: relative;
                top: 200px;
                left: 200px;
                width: 200px;
            }
            .box{
                width: 100%;
                height: 250px;
                border: 1px solid #fff;
                border-radius:5px;
                overflow-y: scroll;
                box-sizing: border-box;
                
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容这是请求得到的数据内容
            </div>
        </div>

        <script type="text/javascript">
            let box=document.querySelector('.box');
            console.log(box.scrollTop)
            box.onscroll=function(){
                if(box.scrollTop+box.clientHeight==box.scrollHeight){
                    page()
                }
            }
            
            function page(){
                alert('加载下一页')
            }
        </script>
    </body>
</html>

相关推荐