javascript - 具有窗口高度的 jQuery .scroll() 触发器

Question

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

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

你可以在这里看到完整的 fiddle ； https://jsfiddle.net/8wr8p4ub/1/

如果我将高度更改为一个精确值，它会触发，但是当元素不可滚动时我该如何实现呢？

Answer 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>