GroupBlog

最近在写小组官网，想实现一种效果就是根据用户当前浏览情况，加载后续的文章内容，于是就在网上找相关的内容，但是发现好多都是无法实现的，终于在我的苦苦寻找之下，终于找到了解决方案，代码如下:

function ScrollEvent() {
        var wScrollY = window.scrollY; // 当前滚动条位置
        var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）
        var bScrollH = document.body.scrollHeight; // 滚动条总高度
        if (wScrollY + wInnerH >= bScrollH - 400) {
            //你需要做的动作
            alert("test");
        }
    }
//绑定事件
window.addEventListener("scroll", ScrollEvent, false);

实现的效果就是，当滚动条离底部小于400个像素的时候，触发事件。
测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
    <div id="part1" style="height:1000px;overflow: auto;background: lightyellow;"></div>
    <div id="part2" style="height:1000px;overflow: auto;background:lightgreen;"></div>
    <script>
        function ScrollEvent() {
        var wScrollY = window.scrollY; // 当前滚动条位置
        var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）
        var bScrollH = document.body.scrollHeight; // 滚动条总高度
        if (wScrollY + wInnerH >= bScrollH - 400) {
            //你需要做的动作
            alert("test");
        }
    }
    //绑定事件
    window.addEventListener("scroll", ScrollEvent, false);
    </script>
</body>
</html>

效果如下:
这里写图片描述

可能有时候还需要在一定的条件之后，需要解除此事件，可以使用下面代码:

window.removeEventListener("scroll", ScrollEvent, false);

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
    <div id="part1" style="height:1000px;overflow: auto;background: lightyellow;"></div>
    <div id="part2" style="height:1000px;overflow: auto;background:lightgreen;"></div>
    <script>
        function ScrollEvent() {
        var wScrollY = window.scrollY; // 当前滚动条位置
        var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）
        var bScrollH = document.body.scrollHeight; // 滚动条总高度
        if (wScrollY + wInnerH >= bScrollH - 400) {
            //你需要做的动作
            alert("test");
            window.removeEventListener("scroll", ScrollEvent, false);
        }
    }
    //绑定事件
    window.addEventListener("scroll", ScrollEvent, false);
    </script>
</body>
</html>

上面代码的效果是：在第一次触发事件后，就将事件去除监听，所一你只会看到一个alert的出现；

本文固定链接:http://blog.dreamchasinger.cn/?p=629
欢迎大家访问我的自建博客:http://blog.dreamchasinger.cn/