在可滚动的 div 中禁用外部滚动 [重复]答案

【问题标题】：Disable outside scrolling while in scrollable div [duplicate]在可滚动的 div 中禁用外部滚动 [重复]
【发布时间】：2014-09-14 22:04:40
【问题描述】：

我有一些 div 包含您可以滚动浏览的信息。但是当您点击顶部或底部时，它会变为滚动整个页面的浏览器滚动。

当鼠标在这个特定的 div 内时，我想禁用外部滚动（这种类型的 div 有 3 个）。

我想要实现的一个例子是 youtube 的播放列表选择器。

Here's an example at youtube 将鼠标悬停在热门上传部分并尝试上下滚动。

编辑：只是尝试在另一个浏览器中使用该链接，视频选择部分似乎没有显示，但启用它的是“添加到播放列表”部分。

有人知道怎么做吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是一个FIDDLE

<div>
  ... some content ...
</div>

div {
  height: 400px;
  overflow: scroll;
}

$('div').on('mousewheel DOMMouseScroll', function(e) {
  var scrollTo = null;

  if(e.type === 'mousewheel') {
     scrollTo = (e.originalEvent.wheelDelta * -1);
  }
  else if(e.type === 'DOMMouseScroll') {
     scrollTo = 40 * e.originalEvent.detail;
  }

  if(scrollTo) {
     e.preventDefault();
     $(this).scrollTop(scrollTo + $(this).scrollTop());
  }
});

【讨论】：

小提琴对我不起作用。文本和页面同时滚动。是因为我使用的是 Mac 触摸板而不是鼠标吗？是否有此解决方案的触摸板版本？

【解决方案2】：

未经测试，但可能是答案：

$( "div" ).scroll(function( event ) {
    event.stopPropagation();//Do not bubble up the DOM, do not scroll document.
});

stopPropagation() 用于防止 DOM 冒泡事件。这样其他元素就不会收到此事件的通知。

【讨论】：