我有一个网站与中心对齐的DIV。现在,一些页面需要滚动,一些不需要。当我从一种类型移动到另一种类型时,滚动条的出现将页面移向一侧几个像素。有没有什么方法可以避免这种情况,而不显式地在每个页面上显示滚动条?


当前回答

与公认的答案相反,即使内容没有溢出屏幕,也建议在浏览器窗口上使用永久滚动条,我更喜欢使用:

html{
  height:101%;
}

这是因为如果内容溢出,滚动条的外观更有意义。

这个比这个更有意义。

其他回答

像这样简单地设置容器元素的宽度就可以了

width: 100vw;

这将使该元素忽略滚动条,并与背景颜色或图像一起工作。

我使用一些jquery来解决这个问题

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

与公认的答案相反,即使内容没有溢出屏幕,也建议在浏览器窗口上使用永久滚动条,我更喜欢使用:

html{
  height:101%;
}

这是因为如果内容溢出,滚动条的外观更有意义。

这个比这个更有意义。

我不这么认为。但样式体与溢出:滚动应该做。不过你好像知道。

将可滚动元素的内容包装到div中,并应用padding-left: calc(100vw - 100%);。

<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user's screen
    </div>
</body>

诀窍是100vw代表包括滚动条在内的视口的100%。如果减去100%,即没有滚动条的可用空间,则最终得到滚动条的宽度,如果不存在滚动条,则得到0。在左侧创建该宽度的填充将模拟第二个滚动条,将居中的内容移回右侧。

请注意,这只在可滚动元素使用页面的整个宽度时才有效,但在大多数情况下这应该没有问题,因为只有少数其他情况下,您有居中可滚动内容。