html - 防止滚动条添加到 Chrome 上的页面宽度

Question

我有一个小问题试图让我的 .html 页面在 Chrome 上保持一致的宽度，例如我有一个页面 (1) 有很多内容溢出视口的（正确的词？）高度，所以有一个垂直滚动条在该页面 (1) 上。在第 (2) 页上，我有相同的布局（菜单、div 等），但内容较少，所以那里没有垂直滚动条。

问题是，在第 (1) 页上，滚动条似乎将元素略微向左推（加到宽度上？），而所有内容都很好地集中在第 (2) 页上

我仍然是 HTML/CSS/JS 的初学者，我相当确信这并不难，但我没有找到解决方案的运气。它在 IE10 和 FireFox（无干扰滚动条）上确实可以正常工作，我只在 Chrome 上遇到过这种情况。

Answer 1

免责声明：覆盖已被弃用。
如果绝对必要，您仍然可以使用它，但尽量不要。

这仅适用于 WebKit 浏览器，但我非常喜欢它。将像auto在其他浏览器上一样。

.yourContent{
   overflow-y: overlay;
}

这将使滚动条仅显示为覆盖，因此不会影响元素的宽度！

Answer 2

您需要做的就是添加：

html {
    overflow-y: scroll;
}

在您的 css 文件中，因为无论是否需要滚动条，尽管您将无法滚动

这意味着视口将具有相同的宽度

Answer 3

大概

html {
    width: 100vw;
}

正是你想要的。

Answer 4

您可以获取滚动条大小，然后对容器应用边距。

像这样的东西：

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

用于删除 h 滚动条的 CSS：

body{
    overflow-x:hidden;
}

试着看看这个：http: //jsfiddle.net/NQAzt/

Answer 5

Safari 和 Chrome 等 Webkit 浏览器在计算宽度时从可见页面宽度中减去滚动条宽度：100% 或 100vw。更多在DM Rutherford 的滚动和页面宽度。

尝试overflow-y: overlay改用。

Answer 6

我发现我可以添加

::-webkit-scrollbar { 
display: none; 
}

直接到我的css，它会使滚动条不可见，但仍然允许我滚动（至少在Chrome上）。当您不想在页面上出现分散注意力的滚动条时非常适合！

Answer 7

对于具有固定宽度的容器，可以通过将容器包装到另一个 div 并将相同的宽度应用于两个 div 来实现纯 CSS 跨浏览器解决方案。

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

单击此处查看Codepen上的示例

Answer 8

body {
    width: calc( 100% );
    max-width: calc( 100vw - 1em );
}

也适用于默认滚动条。可以补充：

overflow-x: hidden;

确保水平滚动条对父框架保持隐藏。除非您的客户希望这样做。

Answer 9

It doesn't seem my other answer is working quite right at the moment (but I'll continue to try to get it operational).

But basically what you'll need to do, and what it was trying to do dynamically, is set the contents' width to slightly less than that of the parent, scrollable pane.
So that when the scrollbar appears it has no affect on the content.

This EXAMPLE shows a more hacky way of attaining that goal, by hardcoding widths instead of trying to get the browser to do it for us via padding.
If this is feasible this is the most simplest solution if you don't want a permanent scrollbar.

Answer 10

2021 年的解决方案是使用scrollbar-gutter，它将滚动条将使用的空间永久添加到元素。

利用

.element-class {
   scrollbar-gutter: stable both-edges;
}

both-edges是可选的。

另请参阅https://caniuse.com/mdn-css_properties_scrollbar-gutter和https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

overflow: overlay已弃用。

这是一个代码笔，用于澄清不同的可能性：https ://codepen.io/waxolunist/pen/ExweBMz

Answer 11

_{编辑：这个答案目前不太正确，请参阅我的其他答案，看看我在这里尝试做什么。我正在尝试修复它，但如果您可以在评论中提供帮助，请在评论中提供帮助，谢谢！}

使用padding-right将减轻滚动条的突然出现

例子

正如您从点中看到的那样，无论是否存在滚动条，文本都会在换行之前到达页面中的同一点。
这是因为当引入滚动条时，填充隐藏在它后面，所以滚动条不会推动文本！

Answer 12

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

其中 300 px 是我的对话框窗口宽度的一半。

这实际上是唯一对我有用的东西。

Answer 13

我在 Chrome 上遇到了同样的问题。仅当滚动条始终可见时才发生在我身上。（在常规设置中找到）我有一个模态，当我打开模态时我注意到......

body {
    padding-left: 15px;
}

被添加到正文中。为了阻止这种情况发生，我添加了

body {
    padding-left: 0px !important;
}

Answer 14

我无法为第一个答案添加评论，而且已经很长时间了......但是那个演示有一个问题：

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop('scrollHeight') 总是等于 b.height()，

我认为应该是这样的：

if(b.prop('scrollHeight')>window.innerHeight) ...

最后推荐一个方法：

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}

Answer 15

如果您有一些容器用作网站内容的包装器，例如导航和页脚，您可以添加以下内容：

min-height: 101vh;

这会将您的页面“延长”1vh，以确保滚动条永远不会消失并且宽度保持不变。

Answer 16

我用这种方式解决了滚动条的类似问题：

首先通过设置禁用垂直滚动条：

overflow-y: hidden;

然后制作一个高度等于屏幕高度的固定位置的 div 并使其宽度变薄以看起来像滚动条。这个 div 应该可以垂直滚动。现在在这个 div 中创建另一个具有文档高度的 div（包含它的所有内容）。现在您需要做的就是在容器 div 中添加一个 onScroll 函数，并在 div 滚动时滚动主体。这是代码：

HTML：

<div onscroll="OnScroll(this);" style="width:18px; height:100%;  overflow-y: auto; position: fixed; top: 0; right: 0;">
    <div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
    </div>
</div>

然后在您的页面加载事件中添加以下内容：

JS：

$( document ).ready(function() {
    var body = document.body;
    var html = document.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    document.getElementById('ScrollDiv').style.height = height + 'px'; 
});

function OnScroll(Div) {
    document.body.scrollTop = Div.scrollTop;
}

现在滚动 div 就像在 body 没有滚动条时滚动 body 一样。