js / css：禁用滚动条但保持滚动位置
我正在使用Jquery对话框在页面顶部打开一个弹出框窗口。 当我打开对话框时，我希望禁用常规页面滚动。 为此，我正在做：
$('body').css({overflow:'hidden'}); 对话框打开时，：
$('body').css({overflow:'auto'});
对话框关闭时
这有效，但是当删除滚动条时，后面的内容会向右移动，结果不太好。
我尝试了另一种方法，通过创建一个css类“noscroll”，如下：
body.noscroll { position: fixed; overflow-y: scroll; width: 100%; }
然后，而不是以前的js代码，我在对话框打开/关闭时添加并删除此类到正文。
现在这适用于滚动条，后面的内容不会向右移动，但使用此方法后面的内容会返回到顶部。
因此，基本上，method1使内容向右移动，而method2使内容移回到顶部。
有谁知道这方面的解决方案？ 对话框打开时没有滚动后面的内容，禁用滚动时没有移动…？
我已经为我的解决方案做了一个非常简单的例子。
你的弹出窗口应该放在一个盒子里
然后将这些CSS放在de root div上
#shadow{ display: none; position: fixed; top:0; bottom: 0; width: 100%; height:100%; background-color: rgba(0,0,0,0.6); }
固定位置非常重要，因为你不想看到白色边框，它将需要完整的窗口宽度而不是正文。
然后是小JS的伎俩
$('#open').click(function(e){ e.preventDefault() $('body').width($('body').width()); $('body').css('overflow', 'hidden'); $('#shadow').css('display', 'block'); }) $('#close').click(function(e){ e.preventDefault() $('body, #shadow').removeAttr('style') })
这里的目标是在移除滚动条之前获取主体宽度。 您的内容不会移动。
希望它有所帮助！
抱歉我的英语，而不是我的母语。
记住偏移应该保持你的弹出窗口;
的jsfiddle
HTML
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
CSS
html, body { margin: 0px; } #popupholder { width: 100%; height: 100%; position: absolute; display: box; display: -webkit-box; display: -moz-box; background-color: rgba(0,0,0,0.75); display: none; } #close { display: block; height: 20px; margin: 75px auto 0px auto; }
JavaScript的
$(document).ready(function() { $('.open').click(function() { // Block scrolling $('body').css('overflow', 'hidden'); // Show popup var offset = window.pageYOffset; //console.log(offset); $('#popupholder').css({ 'display': 'block', 'top': offset + 'px' }); }); $('#close').click(function() { // Enable scrolling $('body').css('overflow', 'auto'); // Hide popup $('#popupholder').css('display', 'none'); }); });
出于安全原因，您可以为#popupholder添加一个非常高的z-index ，但这与问题并不相关。
这是我到目前为止最好的解决方案。 相信我，我尝试了所有其他的，这是我提出的最好和最简单的解决方案。 它在Windows设备上运行良好，它从右侧推送页面，为系统滚动条和IOS设备腾出空间，这些设备在浏览器中不需要空间用于滚动条。 所以通过使用这个你不需要在右边添加填充，这样当你隐藏身体溢出或html与CSS时，页面不会闪烁。
如果你考虑一下，解决方案就很简单了。 我们的想法是在打开弹出窗口时给window.scrollTop（）提供相同的确切位置。 当窗口resize时也改变该位置（因为滚动位置一旦发生就改变）。
所以我们走了……
首先，让我们创建一个变量，让你知道弹出窗口是打开的，并将其命名为stopWindowScroll 。 如果我们不这样做，那么你将在页面上得到一个未定义变量的错误并将其设置为0 – 因为不活动。
$(document).ready(function(){ stopWindowScroll = 0; });
现在让我们打开弹出function可以是你的代码中的任何函数，触发你用作插件或自定义的弹出窗口。 在这种情况下，它将是一个简单的自定义弹出窗口，其中包含单击function的简单文档。
$(document).on('click','.open-popup', function(){ // Saving the scroll position once opening the popup. stopWindowScrollPosition = $(window).scrollTop(); // Setting the stopWindowScroll to 1 to know the popup is open. stopWindowScroll = 1; // Displaying your popup. $('.your-popup').fadeIn(300); });
所以我们接下来要做的是创建关闭弹出function，我再次重复可以是你已经创建或正在插件中使用的任何function。 重要的是我们需要这两个函数将stopWindowScroll变量设置为1或0，以便知道它何时打开或关闭。
$(document).on('click','.open-popup', function(){ // Setting the stopWindowScroll to 0 to know the popup is closed. stopWindowScroll = 0; // Hiding your popup $('.your-popup').fadeOut(300); });
然后让我们创建window.scroll函数，这样我们就可以在上面提到的stopWindowScroll设置为1时阻止滚动 – 作为活动状态。
$(window).scroll(function(){ if(stopWindowScroll == 1) { // Giving the window scrollTop() function the position on which // the popup was opened, this way it will stay in its place. $(window).scrollTop(stopWindowScrollPosition); } });
而已。 除了您自己的页面样式之外，没有必要使用CSS。 这对我来说就像一个魅力，我希望它能帮助你和其他人。
这是一个关于JSFiddle的工作示例：
JS小提琴示例
如果这有帮助，请告诉我。 问候。
你可以计算隐藏溢出之前和之后的身体宽度之间的差异，并将其作为填充权限应用于身体
var bodyStartW = $("body").width(); $("body").css("overflow-y" , "hidden"); var bodyEndW = $("body").width(); var bodyMarginL = bodyEndW - bodyStartW; $("body").css("padding-right" , bodyMarginL);
在Safari中，你对“html”标签采用了同样的技巧，而右边缘采用了边距而不是填充权限
我有同样的问题，这个存储库帮助我无滚动