就是那种鼠标滚轮稍微一滑,然后整个页面向下滚动
时间: 2024-04-09 11:33:17 浏览: 167
鼠标滑轮滚动事件
4星 · 用户满意度95%
如果你想要实现鼠标滚轮向下滑时整个页面自动滚动的效果,你可以监听`mousewheel`或`DOMMouseScroll`事件,并在事件触发时执行滚动操作。
下面是一个基本的示例代码:
```javascript
$(window).on("mousewheel DOMMouseScroll", function(event) {
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
if (delta < 0) {
// 向下滚动
$('html, body').stop().animate({ scrollTop: $(window).scrollTop() + $(window).height() }, 800);
event.preventDefault();
}
});
```
在这个例子中,我们使用`$(window)`选择器来监听窗口的滚轮事件。然后,我们通过`event.originalEvent.wheelDelta`和`event.originalEvent.detail`来获取滚轮滚动的方向。如果滚动方向是向下(delta小于0),我们使用animate()函数将scrollTop属性设置为当前滚动位置加上窗口的高度(`$(window).scrollTop() + $(window).height()`),以实现向下滚动的效果。最后,我们使用event.preventDefault()来阻止默认的滚轮行为。
请注意,由于不同浏览器对滚轮事件的支持和事件属性的命名不同,上述代码中使用了两个事件类型来兼容不同的浏览器。
阅读全文