Jquery实现滚轮滚到底事件

来源：互联网发布：电火花线切割3b编程编辑：程序博客网时间：2024/04/29 09:51
<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>
0 0