1

有时在显示弹出窗口时我想从正文中删除滚动（将其设置为溢出到隐藏），问题在于，根据浏览器和操作系统，它可能有也可能没有永久滚动条（如最新版本的 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);

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

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

4

2 回答 2

0

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

替代方案包括：

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

您还可以提前使用 javascript 测量 os 滚动条的宽度，这样您就可以使用一个数字来进行样式调整，请参阅this。

于 2013-09-26T18:13:22.527 回答
0

我知道这是个老问题，但你的脚本帮助我处理固定的 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%');

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

于 2015-10-14T19:45:32.973 回答