在可滚动的div中禁用外部滚动

Question

我有一些div可以保存您可以滚动的信息.但是,当您点击顶部或底部时,它会更改为滚动整个页面的浏览器滚动.

我想禁用外部滚动,而鼠标在这个特定的div内(有三种这种类型的div).

我试图实现的一个例子是youtubes播放列表选择器.

这是youtube上的一个示例将鼠标悬停在热门上传部分中并尝试上下滚动.

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

有人知道这样做的方法吗？

Answer 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());
  }
});