滚动溢出时阻止滚动父容器:滚动容器已达到其限制

Question

简单地说,我想你们都知道这个问题:你使用鼠标滚轮(或触控板手势)在div设置为的内部滚动overflow:scroll(或设置为该效果).当您到达可滚动区域的末尾时,滚动"命令"会立即发送到父容器 - 例如主窗口.

这可能很烦人,我想知道是否有办法防止它.

我创建了这个jsFiddle以展示问题并为实验提供基础.

我想到的唯一想法是使用,preventDefault但由于我不是JS向导,我不知道我在哪里或如何正确应用它.

Answer 1

这不是最佳选择，但我引导程序将其用于他们的模态窗口。

小提琴

.overflowHidden {
    overflow:hidden !important;
}

$('#scrollable').hover(function () {
        console.log("hello");
        $('body').addClass('overflowHidden');
    }, function () {
        $('body').removeClass('overflowHidden');
    });

Answer 2

经过广泛的研究和激烈的测试，我将我的结果结合到一个完美地满足我的目的的解决方案中。

方法很简单

我们不是从容器内测量滚动条件（滚动时），而是通过编写自己的滚动处理程序来替换整个滚动功能。这样我们就可以完全控制正在发生的事情，而且滚动事件不能默认（或冒泡）到外部容器：

认识贪婪的滚动 v0.9b

$.fn.extend({
    greedyScroll: function(sensitivity) {
        return this.each(function() {
            $(this).bind('mousewheel DOMMouseScroll', function(evt) {
               var delta;
               if (evt.originalEvent) {
                  delta = -evt.originalEvent.wheelDelta || evt.originalEvent.detail;
               }
               if (delta !== null) {
                  evt.preventDefault();
                  if (evt.type === 'DOMMouseScroll') {
                     delta = delta * (sensitivity ? sensitivity : 20);
                  }
                  return $(this).scrollTop(delta + $(this).scrollTop());
               }
            });
        });
    }
});

用法

HTML：

<div class="scrollWrapper"></div>

JavaScript：

$('.scrollWrapper').greedyScroll(25);

我发现 20 的值对于灵敏度来说效果很好，但有些人可能更喜欢更高或更低的设置。

免责声明

我不声称这适用于 Chrome 以外的任何其他操作系统，因为这是我专门确保它适用的。

功劳几乎完全归功于开发我在Lokesh答案的评论之一中链接到的插件的团队。

代码改进总是受欢迎的。