Question

有时在显示弹出窗口时，我想从主体中删除滚动（将其溢出设置为隐藏），问题在于它取决于浏览器和操作系统，它可能有也可能没有永久滚动条（如最新版本的IOS和Ubuntu有一个滚动条，可以在悬停时切换。

所以当我这样做时：

$('body').css('overflow','hidden');

内容可能会向右移动X px，因为滚动条正在从视口中占用空间。为了解决这个问题，我想到了这样做：

    var width = $(window).width();
    $('body').css('overflow','hidden');
    var margin = $(window).width() - width;
    $('html').css('margin-right',margin);

这似乎工作正常，因为它在滚动条的相同宽度的右侧添加了一个白色条，但是如果页面上有固定元素（当滚动条被移除时将向右移动），这不起作用

如何在删除滚动条的同时保留所有内容位置？

Answer 1

我认为您的解决方案很好。你只需要做一些css就可以使白色滚动条占位符不那么明显。

替代方案包括：

使用填充填写差异而不是边距
绝对定位您的内容并使用left属性将其锁定在窗口左侧（无滚动条）

您还可以使用javascript提前测量操作系统滚动条的宽度，这样您就可以使用数字进行风格调整，请参阅this。

Answer 2

我知道这是一个老问题，但是你的脚本帮我处理了固定的div。在我的情况下，我有100％宽度固定标头。一切正常，就在启动你的脚本之后，固定div中的一些元素仍然改变了位置。所以，在你的脚本中我包含了这个：

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' });

关闭脚本后：

$('.header').css('width','100%');

正如我之前所说，在我的情况下，这很好。

完整脚本如下所示：

点击：

var width = $(window).width();
$('html').css('overflow','hidden');

var margin = $(window).width() - width;
$('html').css('margin-right',margin);

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' });

关闭后：

var width = $(window).width();
$('html').css('overflow','visible');

var margin = $(window).width() - width;
$('html').css('margin-right',margin);

$('.header').css('width','100%');

抱歉英语不好。我希望这个答案会对某人有所帮助。

删除滚动条时如何维护html内容位置？

2 个答案: