javascript - 谷歌浏览器中的垂直滚动错误

Question

jsFiddle

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

Answer 1

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

http://jsfiddle.net/JcUxs/2/

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

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

CSS：

.fixoverflow{
    overflow: hidden
}

Answer 2

我认为这是我能实现的最佳解决方案（花了 1 个小时才明白滚动事件和滚轮都被触发了）：

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

只要确认它对你来说足够好，我就会翻译它。

Javascript代码：

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