防止在添加固定位置时页面滚动到顶部 [英] Prevent page scrolling to top upon adding fixed position
问题描述
我遇到的问题是，每当我将.noscroll类添加到正文时，页面就会滚动到顶部.这样，滚动条仍然可见，但是每当出现叠加层时，它就会变灰.
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.
我知道是由addClass()函数引起的，因为当我注释掉该行时，当我的叠加层出现时，它不会滚动到顶部.
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();
});
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;
}
正文HTML
<a href="#">Test</a>
在将.noscroll类添加到正文之后，如何使滚动位置保持不变?
How can I make the scroll position stay the same after the .noscroll class has been added to the body?
我正在尝试达到与Facebook上相同的效果.如果您查看图片或视频，则会显示叠加层，滚动条显示为灰色，但保持滚动位置.
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.
在Cuberto的回答和对自己的一些研究之后，我发现需要做些什么才能使其正常工作.但是我不知道如何开始做.但这是应该解决的问题.我在打开叠加层时需要将主div设置为position: fixed，并将滚动位置的上限值设置为负.退出叠加层时，应删除position: fixed;和top属性，并设置与打开叠加层时相同的滚动位置.
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.
推荐答案
快速浏览一下Facebook是如何做到的，就像这样:
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>
很抱歉，内联样式.您需要以编程方式将主div的top样式设置为滚动位置.
Sorry for the inline styles. You need to programmatically set the main div's top style to your scroll position.
这篇关于防止在添加固定位置时页面滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
