您的位置：首页 > Web前端 > JavaScript

JavaScript实现网页底部事件触发

2016-12-08 08:55 435 查看

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

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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 事件监听

相关文章推荐

新的分享

章节导航