当 child 徘徊时，Javascript body 不滚动 parent

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

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

Demo