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


当前回答

扩展Rapti的答案,这应该是一样的工作,但它增加了更多的边距正文的右侧,并隐藏它与负html边距,而不是增加额外的填充,可能会影响页面的布局。这样,实际页面(在大多数情况下)不会发生任何更改,代码仍然具有功能。

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

其他回答

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

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

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});
html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

的例子。点击“改变最小高度”按钮。

使用calc(100vw - 100%)我们可以计算滚动条的宽度(如果它不显示,它将是0)。想法:使用负margin-right,我们可以将<html>的宽度增加到这个宽度。你会看到一个水平滚动条-它应该隐藏使用overflow-x: hidden。

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

html{
  height:101%;
}

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

这个比这个更有意义。

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

我不知道这是否是一个旧帖子,但我有同样的问题,如果你想垂直滚动,你应该尝试溢出-y:滚动