Question

尝试在Google Chrome中垂直滚动div child，到达最后，如果您尝试继续滚动，也会滚动div parent，这在Mozilla中不会发生。如何解决？

Answer 1

使用jquery，当鼠标悬停在子div上时，您可以禁用溢出。这种方式适用于Firefox 24 for Mint和Chromium 28 ...

$('.child').on('mouseover',function(){
    $(this).parent().addClass('fixoverflow');
});

$('.child').on('mouseleave',function(){
    $(this).parent().removeClass('fixoverflow');
});

的CSS：

.fixoverflow{
    overflow: hidden
}

Answer 2

我认为这是我能达到的最佳解决方案（花了1个小时才能理解滚动事件和滚轮都会触发）：

我使用flag变量来保持滚动条的位置。我使用了jquery，我刚刚从评论中注意到你要求纯javascript。无论如何jquery基于原生javascript，所以我稍后会编辑我的答案并将其翻译成纯代码。

请确认它对您来说足够好，我会翻译它。

JavscriptCode：

var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;

$(".child").on('mousewheel', function (event) {
    clearTimeout(stopWheelTimer);
    event.stopPropagation();
    isCanceled = true;
    currentPos = $(".parent").scrollTop();
    stopWheelTimer = setTimeout(function(){
        isCanceled = false;        
    }, 250);

});
$(".parent").on('mousewheel', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
   }
}); 
$(".parent").on('scroll', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
    }
});

工作实例：
jsFiddle

Google Chrome中的垂直滚动错误

2 个答案: