Question

如果你有两个可滚动的面板，一个（一种对话框）在另一个面板上，那么如何在修复后面板时使用鼠标滚轮滚动前面板？

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

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

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

可能是黑客攻击，但您可以将正文设置为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');
});

如何暂时阻止鼠标滚轮双滚动？

2 个答案: