Question

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

我想禁用外部滚动，而鼠标位于此特定div内（此类div有三种）。

我正在尝试实现的一个例子是youtubes播放列表选择器。

Here's an example at 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());
  }
});

Answer 2

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

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

stopPropagation（）用于防止冒泡DOM的事件。这样，其他元素不会被通知此事件。

了解详情：http://api.jquery.com/event.stoppropagation/

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

2 个答案: