使用js监控鼠标滚动自动加载新内容

大超 2021-07-17

为了提升用户的体验，很多时候需要用到自动加载，这样就不用一页一页的点了，比较方便。这里提供了基于Jquery的一个监控滑轮滚动到最底部时，自动加载新数据并追加到原数据之后的js代码。只写了js部分，数据部分就不写了，数据格式是json，可以用PHP，也可以用.net或者java都可以。

<html>
<head>
<meta charset="utf-8">
<title>滚轮自动加载</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .main {
        background: #fff;
    }
    .main h3 {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #F00;
    }
    .ul-list li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
//alert("到达底部,再次滚动将会加载更多数据");
//$("#ul-list").append($('<li>' + '新文章' + '</li>'));
getData();
}
}
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可是范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//ajax获取数据
function getData()
    {
        $.ajax({
            type: 'POST',
            url: '/Home/GetArticle',
            dataType: 'json',
            data: { },
            success: function (data) {
                //将返回值动态加载，动态生成标签。
                for (i = 0; i < data.length;i++)
                {
                    $("#ul-list").append($('<li>' + data[i].article + '</li>'));
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThown) {
                alert("加载失败！");
            }
        })
    }
</script>
<body>
<div class="main">
    <h3>最新文章</h3>
    <ul class="ul-list" id="ul-list">
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
        <li>文章列表</li>
    </ul>
</div>
</body>
</html>

以上代码实现了基于Jquery的一个监控滑轮滚动功能，可以自己进行扩展。

有问题可在下方评论留言，或关注“大超小志”微信公众号留言。

标签： javascript jquery 网站技术