如何防止滚动条重新定位网页?

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

当前回答

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

2009-10-07 15:26:53

其他回答

将可滚动元素的内容包装到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。在左侧创建该宽度的填充将模拟第二个滚动条，将居中的内容移回右侧。

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

2015-05-18 01:00:34

我试图修复可能由twitter bootstrap .modal-open类应用于body引起的相同问题。解决方案html {overflow-y: scroll}不起作用。我发现的一个可能的解决方案是添加{width: 100%;宽度:100vw}到HTML元素。

2015-07-09 09:23:00

@kashesandr的解决方案对我有用，但为了隐藏水平滚动条，我为身体添加了一个样式。这里是完整的解决方案:

CSS

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

$(function(){
    /**
     * For multiple modals.
     * Enables scrolling of 1st modal when 2nd modal is closed.
     */
    $('.modal').on('hidden.bs.modal', function (event) {
      if ($('.modal:visible').length) {
        $('body').addClass('modal-open');
      }
    });
});

JS唯一的解决方案(当第二模式从第一模式打开):

/**
 * For multiple modals.
 * Enables scrolling of 1st modal when 2nd modal is closed.
 */
$('.modal').on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
    $('body').css('padding-right', 17);
  }
});

2019-10-29 04:12:35

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

2009-09-13 15:08:57

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

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

2017-11-14 01:16:19

如何防止滚动条重新定位网页?

推荐文章

最新文章

标签