带窗口高度的jQuery .scroll()触发器

时间:2017-10-23 16:03:16

标签: javascript jquery css scroll

我试图在鼠标滚轮旋转时触发一个功能,但是div是窗口的高度,因此不能滚动并且不会触发我的功能。这是我用来测试它是否有效的代码;

jQuery(document).ready(function($) {
  $( document ).scroll(function () {
    console.log('it works!');
  });
});

你可以在这里看到完整的小提琴; https://jsfiddle.net/8wr8p4ub/1/

如果我将高度更改为精确值,则触发,但是当元素不可滚动时,如何实现此目的?

3 个答案:

答案 0 :(得分:2)

您必须在此处查看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>

答案 1 :(得分:0)

一旦页面内容不长,就不需要打扰自己。但是从我在那里看到的,你的代码很好,只要内容超过最小页面滚动

,它就会起作用

更好的是,您可以在JS

中使用mousewheel事件

答案 2 :(得分:0)

您需要使用mousewheel事件处理程序:

$('div').on('mousewheel', function(event){
   if(event.originalEvent.wheelDelta / 120 > 0) {
     console.log('scrolled up');
   } else {
     console.log('scrolled down');
   }
});