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

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

当前回答

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

2015-07-09 09:23:00

其他回答

我已经在我的一个网站上解决了这个问题，通过显式地在javascript中设置主体的宽度为视口大小减去滚动条的宽度。我使用这里记录的基于jQuery的函数来确定滚动条的宽度。

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

2011-11-09 12:34:44

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

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

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

2016-04-13 20:01:13

body {
  scrollbar-gutter: stable both-edges;
}

新的css规范，将有助于滚动条重新定位的方式: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

2021-10-22 07:52:43

用这个来扩展答案:

body {
    width: calc(100vw - 17px);
}

一位评论者建议添加左填充以保持居中:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

但是如果你的内容比视口宽，事情看起来就不对了。为了解决这个问题，你可以使用媒体查询，像这样:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

1058px =内容宽度+ 17 * 2

这让水平滚动条处理x溢出，并在视口足够宽以包含固定宽度的内容时保持居中内容

2016-09-13 20:41:34

将可滚动元素的内容包装到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

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

推荐文章

最新文章

标签