CODEWITHSUNDEEP
javascriptjquerycss
Horia Rudan
Horia Rudan

Reputation: 178

Prevent non-fixed elements from scrolling when reaching the end of a fixed element

I know this question has been asked before, but I couldn't find an answer for it.

Basically, I have a fixed positioned sidebar that contains a menu and the rest of the page.

When scrolling the fixed sidebar and reaching the end, the rest of the page starts to scroll to. I know this is "normal behaviour" but i need to prevent this from happening.

I also tried to position the rest of the page (container) as fixed and using overflow:auto on it and that does the job but it interferes with the MaintainScrollPositionOnPostBack = true property in my asp.net application.

Any guidance would be appreciated.

Upvotes: 1

Views: 87

Answers (1)

Stephan Muller
Stephan Muller

Reputation: 27600

A simple fix would be to disable scrolling on the container as long as you hover over the menu, and restore it when you hover something else:

$('.menu').hover(function() {
    $('.container').css('overflow', 'hidden'); 
}, function() {
    $('.container').css('overflow', 'auto');
});

Or if the menu precedes the container in the HTML you could even try:

.menu:hover + .container {
    overflow: hidden;
}

As commented below, this is what fixed the problem without a flickering scroll bar:

jQuery: 

$('.menu').hover(function() { 
    $('body').addClass("noscroll"); 
}, function() { 
    $('body').removeClass("noscroll"); 
});

CSS:

body.noscroll { 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}

Upvotes: 1

Related Questions