如何暫時阻止鼠標滾輪雙滾動？

如果您有兩個可滾動面板，一個（一種對話框）正在另一個之上，那麼如何在使用鼠標滾輪固定後面板時使前面板可以滾動？如何暫時阻止鼠標滾輪雙滾動？

爲了使我的問題更清楚，我做了一個小提琴：

當你接近頂部，滾動面板背後輪過了，我不希望這樣。我希望後面板中可以看到相同的線條，而前面板可見。什麼是解決方案？

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

來源

2013-08-25 Denys Séguret

可能是一個黑客，但你可以在身上設置爲overflow:hidden，導致它不能滾動，然後在前景面板不顯示時重置溢出：

document.body.style.overflow="hidden"

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

來源

2013-08-25 17:35:26

您的鏈接不是爲我工作。如果不明顯，我不希望後面的面板的滾動位置根本改變（當前面板可見時，相同的行必須保持可見）。 –

對不起編輯，現在嘗試 –

是啊，他們留下來。 –

試試這個，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'); 
});

來源

2013-08-25 18:15:08 SarathSprakash

我很抱歉，除了我不想要的懸停功能外，我沒有看到任何其他答案，除了懸停功能（*「我希望在前面板可見的情況下在後面板中可以看到相同的線條」 *）。 –

因爲您告訴暫時禁止鼠標滾輪 – SarathSprakash

是的，在前面板可見時，必須防止面板位於後面。這就是Patrick取得的成就。 –

如何暫時阻止鼠標滾輪雙滾動？

回答

相關問題