我试图在鼠标滚轮旋转时触发一个函数,但是div是窗口的高度,因此不可滚动,也不会触发我的函数。这是我用来测试它是否有效的代码;
jQuery(document).ready(function($) {
$( document ).scroll(function () {
console.log('it works!');
});
});
你可以在这里看到完整的小提琴;https://jsfiddle.net/8wr8p4ub/1/
如果我将高度更改为精确值,它会触发,但是当元素不可滚动时,我如何实现这一点?
您必须在此处检查mousewheel
事件,而不是文档滚动。由于在您的情况下文档没有滚动。
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
}
else {
// scroll down
console.log("scroll down");
}
});
* {
padding: 0;
margin: 0;
}
.hi {
height: 100vh; // Change to 1200px and see the output in the console.
width: auto;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>
一旦页面内容没有那么长,您就不需要为滚动而烦恼。但是从我在那里看到的,你的代码很好,只要内容超过最小页面滚动,它就会工作
更好的是,您可以在JS中使用鼠标滚轮事件
您需要使用鼠标滚轮事件处理程序:
$('div').on('mousewheel', function(event){
if(event.originalEvent.wheelDelta / 120 > 0) {
console.log('scrolled up');
} else {
console.log('scrolled down');
}
});