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

---

在Google Chrome中尝试垂直滚动div

子项

，到达末尾，如果您尝试继续滚动，也会滚动div

父项

，这在Mozilla中不会发生。如何修复它？

使用jquery，当鼠标悬停在子div上时，可以禁用溢出。 这种方法适用于Firefox24和Chromium 28

css:

---

我认为这是我能实现的最佳解决方案（花了1个小时才理解滚动事件和控制盘同时触发）：

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

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

JavscriptCode:

工作示例：

---

这可能就是你想要的：我看到的问题也在这里，但我还没有弄明白如何用纯javascript或（更好的）css解决。。。你使用什么版本的谷歌浏览器？它在JSFIDLE上对我很有效。我正在使用29版。我在Chrome29（Win）和Chrome29（Linux）上都试过。问题是滚动到div子项的末尾，如果继续，滚动也会滚动父项div，我不希望这样。你想要一个gif来看看会发生什么吗？好的，谢谢你，它可以工作，但是在css中添加一个解决方案来解决这个问题还没有呢？

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

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

.fixoverflow{
    overflow: hidden
}

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);
    }
});