js/css :禁用滚动条，但保留滚动位置
js/css :禁用滚动条，但保留滚动位置
提问于 2012-09-04 04:42:10
我使用Jquery对话框在页面顶部打开一个弹出框窗口。当我打开对话框时，我希望禁用常规页面滚动。要做到这一点，我正在做：
$('body').css({overflow:'hidden'});对话框打开时，请执行以下操作：
$('body').css({overflow:'auto'});对话框关闭时。
这是有效的，但当滚动条被移除时，后面的内容会向右移动，结果不是很好。
我尝试了另一种方法，创建了一个css类"noscroll"，如下所示：
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}然后，代替前面的js代码，我在打开/关闭对话框时将这个类添加到主体中并将其删除。
现在，这适用于滚动条，并且后面的内容不会向右移动，但是使用这种方法，后面的内容会回到顶部。
因此，基本上method1使内容向右移动，而method2使内容回到顶部。
有没有人知道解决这个问题的办法？对话框打开时没有滚动到后面的内容，禁用滚动时也没有移动...？
回答 2
Stack Overflow用户
发布于 2018-08-18 00:53:37
我有同样的问题，这个存储库帮助我no-scroll
Stack Overflow用户
发布于 2013-09-30 21:31:12
您可以计算溢出隐藏之前和之后的正文宽度之差，并将其作为右填充应用于正文
var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);在Safari中，您对"html“标记和边距-右侧而不是填充-右侧使用了相同的技巧
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12253802
复制相关文章
相似问题