使用鼠标滚轮滚动页面时避免滚动可滚动元素

【问题标题】：Avoid scrolling scrollable elements when scrolling the page using the mousewheel使用鼠标滚轮滚动页面时避免滚动可滚动元素
【发布时间】：2014-08-22 09:37:34
【问题描述】：

如何在使用鼠标滚轮滚动页面时防止滚动可滚动元素（例如文本区域、带有滚动条的 div）？

当我使用鼠标滚轮从上到下垂直滚动页面时，我想忽略恰好在鼠标光标下出现的可滚动元素。

我仍然想在不滚动页面时滚动“可滚动元素”，而只是将鼠标悬停在元素上并使用滚轮。

【问题讨论】：

标签： javascript scrollwheel

【解决方案1】：

尝试使用插件jquery-mousewheel (get it here) 并执行以下操作：

$('.scrollable').mousewheel(function(e) {
   return false;
}

您将scrollable 类添加到所述可滚动项的位置。

【讨论】：

编辑了我的问题；我仍然希望能够在不滚动页面时滚动元素，但只需将元素悬停并使用滚轮...

【解决方案2】：

你可以简单地用 css 做到这一点：

.something {
    overflow-y: hidden;
}
.something:hover {
    overflow-y: scroll;
}

http://jsfiddle.net/9Lx7a1v6/

【讨论】：

不起作用（请参阅fiddle）。当您滚动页面并且 div 在“鼠标光标下”滚动时，div 会被缩放而不是页面。