js 如何监听向下滚动事件
时间: 2024-05-30 20:14:44 浏览: 16
JS监听向下滚动事件的方法是使用window对象的scroll事件,通过判断滚动条的滚动距离和网页的总高度之差,来确定是否向下滚动。具体代码实现可以参考以下示例:
window.addEventListener('scroll', function(){
// 获取滚动条的滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取网页的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 获取浏览器窗口的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 判断是否向下滚动
if (scrollTop + windowHeight == scrollHeight) {
console.log('向下滚动了');
}
});
相关问题
JavaScript监听滑条的滚动事件,向上滚动就将页面刷新,向下滚动就将某个元素变色
您可以使用以下代码来监听滑条的滚动事件,并根据滚动方向执行不同的操作:
```javascript
var lastScrollPosition = 0; // 保存上一个滚动位置
window.addEventListener('scroll', function(e) {
var currentScrollPosition = window.scrollY; // 获取当前滚动位置
if (currentScrollPosition < lastScrollPosition) {
// 向上滚动,刷新页面
location.reload();
} else if (currentScrollPosition > lastScrollPosition) {
// 向下滚动,将元素变色
var element = document.getElementById('myElement'); // 获取要变色的元素
element.style.backgroundColor = 'red'; // 将元素背景色设置为红色
}
lastScrollPosition = currentScrollPosition; // 更新上一个滚动位置
});
```
在这个例子中,我们使用了一个lastScrollPosition变量来保存上一个滚动位置。每次滚动事件被触发时,我们比较当前滚动位置和上一个滚动位置,以确定滚动方向。如果滚动方向是向上的,我们将刷新页面。如果滚动方向是向下的,我们将元素背景色设置为红色。
请注意,这个例子中的元素ID是'myElement'。您需要将它替换为您要变色的元素的ID。
JS判断鼠标向上滚动还是向下滚动
可以通过监听`mousewheel`或`DOMMouseScroll`事件来判断鼠标滚轮的滚动方向,具体实现如下:
```javascript
var lastScrollTop = 0;
window.addEventListener('mousewheel', function(event) {
var delta = event.wheelDelta || -event.detail;
var currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (delta > 0 && currentScrollTop < lastScrollTop) {
console.log('向上滚动');
} else if (delta < 0 && currentScrollTop > lastScrollTop) {
console.log('向下滚动');
}
lastScrollTop = currentScrollTop;
});
```
在这个示例中,我们通过比较当前滚动位置与上一次滚动位置的大小关系,来判断鼠标滚轮的滚动方向。如果`delta`为正数且当前滚动位置小于上一次滚动位置,则说明鼠标向上滚动;如果`delta`为负数且当前滚动位置大于上一次滚动位置,则说明鼠标向下滚动。