Question

这是fiddle

<style>
#scrollable{
    width: 300px;
    height: 300px;
    overflow: scroll;
}

#contents{
    width: 500px;
    height: 500px;
    position: relative;
}

#element{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 80px;
}

</style>
<div id="scrollable">
    <div id="contents">
        <div id="element">
            While this is hovered, #scrollable should not scroll
        </div>
    </div>
</div>

如何在不移动滚动条的情况下阻止某些可滚动元素滚动，同时悬停另一个元素，当滚动内部存在可滚动时，该元素不能以类似方式滚动。

Answer 1

Demo Fiddle

因为你不能直接中断和取消滚动事件，使用jQuery，你可以简单地改变可滚动元素的overflow属性：

$('#element').on('mouseover',function(){
    $('#scrollable, html, body').css('overflow','hidden');
});
$('#element').on('mouseout',function(){
    $('#scrollable, html, body').css('overflow','auto');
});

Answer 2

$('#element').on({
'mousewheel': function(event) {
    event.preventDefault();
    event.stopPropagation();
    },
'DOMMouseScroll': function(event) {
    event.preventDefault();
    event.stopPropagation();
}
});

Demo

当孩子盘旋时，Javascript身体不滚动父母

2 个答案:

Demo Fiddle