Issue
I'm facing a problem where the page is scrolling to the top whenever I add my .noscroll class to the body. This way the scrollbar is still visible but greyed out whenever the overlay appears.
I know that it's the addClass() function that is the cause of this because when I comment out that line, it doesn't scroll to the top when my overlay appears.
jQuery
$('a').click(function(e) {
//reset default anchor behavior
e.preventDefault();
//add noscroll class to body
$("body").addClass("noscroll");
//open overlay box
openOverlayBox();
});
The openOverlayBox() function is simply a full browser screen overlay with a black tint.
CSS
body.noscroll{
position: fixed;
width: 100%;
overflow-y: scroll;
}
Body HTML
<a href="#">Test</a>
How can I make the scroll position stay the same after the .noscroll class has been added to the body?
EDIT 1: I'm trying to achieve the same as on Facebook. If you view a picture or video, the overlay appears, the scrollbar is greyed out but the scrolled position is maintained.
EDIT 2: I found a very close solution to my issue, but the only thing is that this does not grey the scrollbar out, but just removes it. Also when the content is centered in the middle, it still makes the content jump a little to the right because the scrollbar from the body is hidden.
EDIT 3: After Cuberto's answer and some research of myself I found out what needs to be done to get it working I want. However I don't have a clue how I would start doing it. But this is what should solve it. I when opening the overlay I need to set my main div on position: fixed and a negative top value of the scroll position. When exiting the overlay, the position: fixed; and top attribute should be removed and the same scroll position set as when the overlay was opened.
Solution
Taking a quick look at how facebook does it, it's something like this:
<body>
<div class="main" style="position: fixed; top: -400px"></div>
<div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>
Sorry for the inline styles. You need to programmatically set the main div's top style to your scroll position.
Answered By - sbking
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.