CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Denys Séguret
Denys Séguret

Reputation: 382112

How to temporarily prevent mouse wheel double scrolling?

When you have two scrollable panels, one (a kind of dialog) being over the other one, how do you make the front panel scrollable using the mouse wheel while fixing the one behind ?

To make my question clearer, I made a fiddle :

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

When you wheel towards the top, the panel behind scrolls too, and I don't want that. I want the same lines being visible in the panel behind while the front panel is visible. What's the solution ?

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

Upvotes: 1

Views: 959

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

Try this , 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');
});

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

Might be a hack, but you could set the body to overflow:hidden, causing it not be able to scroll, then reset the overflow when foreground panel isnt showing :

document.body.style.overflow="hidden"

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

Upvotes: 3

Related Questions