Jquery实现滚轮滚到底事件

最新推荐文章于 2024-08-14 17:15:24 发布

曹振华

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量4.0k

点赞数

分类专栏： jquery 文章标签： Jquery 滚轮滚轮到底

本文链接：https://blog.csdn.net/chadcao/article/details/52086645

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>scroll</title>
    <script type="text/javascript" src="javascript/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var pageSize = 60;
        var studentIndex = 0;
        $(function () {
            AddStudents();
            $("#contain").scroll(function () {
                var $this = $(this),
                viewH = $(this).height(),//可见高度
                contentH = $(this).get(0).scrollHeight,//内容高度
                scrollTop = $(this).scrollTop();//滚动高度
                //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
                if (scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容
                    console.log(scrollTop);
                    AddStudents();
                }
            });
        });
        function AddStudents() {
            var html = '';
            for (var i = studentIndex; i < (studentIndex + pageSize) ; i++) {
                var no = (i + 1);
                var name = '张三' + (i + 1);
                html += '<tr><td>' + no + '</td><td>' + name + '</td></tr>';
            }
            studentIndex += pageSize;
            $('#mainTbody').append(html);
        }
    </script>
</head>
<body>
    <div id="contain" style=" height:600px; overflow:auto;">
        <table>
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                </tr>
            </thead>
            <tbody id="mainTbody"></tbody>
        </table>
    </div>
</body>
</html>