Jquery - 在不可滚动的 div 上滚动事件答案

【问题标题】：Jquery - Scroll event on a non scrollable divJquery - 在不可滚动的 div 上滚动事件
【发布时间】：2020-02-14 19:25:23
【问题描述】：

示例： http://jsbin.com/ofifiy/2/edit#preview

我尝试用不可滚动的 div（绿色的）滚动 div（红色的）。我的问题是，当我在绿色 div 上滚动时，jquery scroll() 不会触发。

HTML

<div id="targetWithNoScroll" style="border:1px solid #0f0;  width:100px; height:100px;">
    scroll here = scroll the red div<br />   
  </div>

$('#targetWithNoScroll').scroll(function() {
  $('body').append('No scroll <br />');
});

【问题讨论】：

为什么你会期望一个滚动事件在一个无法滚动的 div 上触发？这对我来说似乎是正确的行为。
请解释这里的逻辑。您将侦听器应用于不会触发的事物（在不可滚动的 div 中滚动），因此您可以在回调中输出“什么都没有发生”？这没有任何意义。

标签： jquery scroll

【解决方案1】：

您需要将鼠标滚轮事件绑定到该 div。不幸的是，没有原生的 jQuery 鼠标滚轮事件，所以你必须选择一个插件或自己编写。但我建议您选择其中一种，因为它可以为您节省大量时间：

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

1) 加载 jQuery 和鼠标滚轮插件鼠标滚轮插件是here。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) 将鼠标滚轮事件附加到正文 “30”代表速度。 preventDefault 确保页面不会向下滚动。

$(function() {
   $("#element").mousewheel(function(event, delta) {
      this.scrollTop -= (delta * 30);
      event.preventDefault();
   });
});

【讨论】：

所有 3 个链接都已失效
我插入了内容，所以它不会丢失。不幸的是，我无法插入整个框架，所以我必须链接它
这很公平，只是偶然发现了这一点，所有 3 个链接都已失效。随着时间的推移，css-tricks 似乎可以可靠地链接。