手机端分页

原理：通过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>
复制代码

 

posted @   雪旭  阅读(1680)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示