js监听滚动条滚动事件(javascript 滚动监听)

今天我们要来谈论的是JavaScript滚动监听。 JavaScript滚动监听是一种常见的思路，可以通过监控页面滚动的事件来做一些交互式的事情。比如，我们可以通过滚动监听来实现滚动加载、图片懒加载、导航栏固定等效果。接下来，我们就来具体了解一下JavaScript滚动监听的相关知识。

在具体实现滚动监听之前，让我们先来了解一下常见的滚动事件。最常见的滚动事件就是scroll事件了。当用户滚动页面的时候，就会触发scroll事件。使用addEventListener()方法可以为滚动事件添加监听器。

window.addEventListener('scroll', function() {
// 监听函数
})

实现滚动监听的方式有很多，下面我们就来看一下几种比较典型的实现方式。

滚动加载

在一些网页中，我们常常看到下拉到底部的时候，会自动加载新的内容。这种效果就是通过滚动监听来实现的。实现滚动加载的方式有很多种，这里我们介绍一种比较简单的方式。我们可以监控scroll事件，并通过计算页面滚动的距离来判断是否需要加载新的内容。

window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
// 加载新的内容
}
})

上面的代码中，我们利用了document.documentElement.scrollTop、document.documentElement.clientHeight、及document.documentElement.scrollHeight属性来判断是否需要加载新的内容。其中document.documentElement.scrollTop表示当前页面已经滚动的距离，document.documentElement.clientHeight表示当前窗口的可视高度，document.documentElement.scrollHeight表示页面内容的总高度。

懒加载

懒加载是指在页面滚动到需要显示的内容时，才去加载该内容，而不是一次性加载全部内容。比如，我们在加载图片的时候，就可以使用懒加载来提高页面效率和用户体验。

window.addEventListener('scroll', function() {
var images = document.getElementsByTagName('img');
var viewHeight = document.documentElement.clientHeight;
for (var i = 0; i< images.length; i++) {
var rect = images[i].getBoundingClientRect();
if (rect.top< viewHeight) {
images[i].src = images[i].dataset.src;
}
}
})

上面的代码中，我们使用了getBoundingClientRect()方法来获取图片元素的位置信息。同时，我们也使用了date-src属性来存储图片的真实地址，等到需要显示图片的时候再将它赋给src属性。

导航栏固定

在一些网页中，我们常常看到网站的头部导航栏是一直保持在顶部的。实现这种效果，就需要用到滚动监听。

window.addEventListener('scroll', function() {
var navbar = document.getElementById('navbar');
if (document.documentElement.scrollTop >= 100) {
navbar.style.position = 'fixed';
navbar.style.top = '0';
} else {
navbar.style.position = 'relative';
}
})

在上面的样例代码中，我们通过判断页面滚动的距离来决定是否固定导航栏的位置。当页面滚动的距离超过100个像素的时候，我们就将导航栏的position属性设置为fixed，让导航栏一直保持在顶部。同样的，当页面滚动的距离小于100个像素的时候，则取消导航栏的固定位置。

通过上面的三个示例，我们可以看出，滚动监听是一种非常有用的交互方式。只要我们巧妙地利用滚动事件和一些JS代码，就可以实现很多酷炫的效果。在实际开发中，我们可以根据具体需要来尝试各种滚动监听的实现方式，以达到更好的用户体验和页面效果。