Question

简单地说，我想你们都知道这个问题：你使用鼠标滚轮（或触控板手势）在设置为div的{{1}}内滚动（或设置为该效果）。当您到达可滚动区域的末尾时，滚动“命令”会立即发送到父容器 - 例如主窗口。

这可能非常烦人，我想知道是否有办法阻止它。

我创建this jsFiddle来证明问题并为实验提供基础。

我想到的唯一想法是使用overflow:scroll，但由于我不是JS向导，我不知道我在哪里或如何正确应用它。

Answer 1

这不是最佳的，但是我的bootstrap将它用于模态窗口。

.overflowHidden {
    overflow:hidden !important;
}

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

Answer 2

经过广泛的研究和暴力测试后，我将我的结果整合到一个完全符合我目的的解决方案中。

方法很简单

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

认识 greedyScroll 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 的答案中的一条评论中链接的插件的团队。

始终欢迎代码改进。

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

2 个答案: