jQuery滑动div到底部自动加载新内容的方法

最初发表于: 2019-11-02 17:31:14

示例代码如下

<html>

<head>
    <meta charset="utf-8">
    <style>
        .main {
            height: 700px;
            overflow: auto;
            border: 1px solid blue;
        }

        /* 重点是.main有1个高度, 并且设置overflow: auto; */

        .child {
            border: 1px solid red;
            margin-top: 20px;
            color: grey;
            height: 800px;
        }

        /* .child是什么样子并不重要 */
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div>下拉加载更多</div>
        <div class="main">
            <div class="child"></div>
        </div>
    </form>
</body>
<script src="https://static.class4ever.com/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".main").unbind("scroll").bind("scroll", function(e) {
            var sum = this.scrollHeight;
            if (sum <= $(this).scrollTop() + $(this).height()) {
                $(".main").append($(".child").eq(0).clone()); //这里是演示, 真实情况应该是通过ajax得到并显示数据
            }
        });
    });
</script>

</html>

如果要看滚动到页面底部自动刷新的方法, 可以看这篇文章