禁用带有 jQuery 的鼠标滚轮用于 ID 但不是 Class（以及所有子项类）内部 ID

Question

html:

<div id="section-2">
  <div class="scroll_sec">
  <div class="inner">
  .... content with overflow....
  </div>
  </div>
</div>

尝试在所有 #section-2 中禁用鼠标滚轮，但同时在整个 .scroll_sec 及其内容中允许它。

jQuery:

$("#section-2").not( ".scroll_sec" ).bind("mousewheel", function() {
    return false;
});

但是，正如您在 fiddle 中看到的那样，鼠标滚轮仍然禁用了所有 #section-2，包括内部 .scroll_sec

我该怎么做？显然 .not() 不是解决方案，因为它似乎具有相同的结果，无论它是否包含在代码中。

Answer 1

您可以使用下面的 CSS 选择器并将滚动限制在内部 div 之外。

$("#section-2").bind("mousewheel", function(event) {
  const target = event.target;
  return target.className === 'scroll_sec' ? true : false;
});

#section-2 {
  height: 500px;
}

.scroll_sec {
    width: 50%;
    height: 150px;
    margin: 0 auto;
    overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-2">
  <div class="scroll_sec">
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  </div>
</div>

禁用带有 jQuery 的鼠标滚轮用于 ID 但不是 Class（以及所有子项 类）内部 ID

Disable Mouse Wheel with jQuery for ID but not Class (and all children classes) Inside ID

jquery

mousewheel

禁用带有 jQuery 的鼠标滚轮用于 ID 但不是 Class（以及所有子项类）内部 ID