javascript - 如何暂时防止鼠标滚轮双滚动？

Question

当您有两个可滚动面板，一个（一种对话框）在另一个上方时，如何在固定后面的一个时使用鼠标滚轮使前面板可滚动？

为了让我的问题更清楚，我做了一个小提琴：

http://jsfiddle.net/dystroy/kgdBQ/1/

当您向顶部滚动时，后面的面板也会滚动，我不希望这样。我希望在前面板可见的同时，后面的面板中也可以看到相同的线条。有什么解决办法？

HTML：

<div id=a>plenty of lines here</div>
<div id=b>here too</div>

CSS：

#b {
    position: fixed;
    top:20%; left:20%; right:20%; bottom:20%;
    overflow: auto;
    background: yellow;
}

JavaScript：

setTimeout(function(){ $('#b').fadeIn() }, 1500);

Answer 1

可能是 hack，但您可以将 body 设置为overflow:hidden，导致它无法滚动，然后在前景面板未显示时重置溢出：

document.body.style.overflow="hidden"

http://jsfiddle.net/kgdBQ/3/

Answer 2

试试这个， http://jsfiddle.net/sarathsprakash/kgdBQ/4/

$('#a,#b').html(Array.apply(0,Array(500)).map(function(_,i){return i}).join('<br>'));
$(window).scrollTop(1000);
setTimeout(function(){ $('#b').fadeIn() }, 1500);
$('#b').hover(function() {
    $('html, body').css('overflow', 'hidden');
}, function() {
    $('html, body').css('overflow', 'auto');
});