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

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

这仅适用于 WebKit 浏览器，但我非常喜欢它。在其他浏览器上的行为类似于 auto。

.yourContent{
   overflow-y: overlay;
}

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

---

您需要做的就是添加：

html {
    overflow-y: scroll;
}

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

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

---

大概

html {
    width: 100vw;
}

正是你想要的。

---

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

像这样的东西：

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/

---

Safari 和 Chrome 等 Webkit 浏览器在计算宽度时从可见页面宽度中减去滚动条宽度：100% 或 100vw。 DM Rutherford's Scrolling and Page Width 提供更多信息。

请尝试改用 overflow-y: overlay。

---

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

---

我发现我可以添加

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

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

---

对于具有固定宽度的容器，可以通过将容器包装到另一个 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;
}

Click here to see an example on Codepen

---

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

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

overflow-x: hidden;

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

---

目前我的其他答案似乎不太正确（但我会继续尝试让它运行）。

但基本上你需要做的，以及它试图动态做的，是将内容的宽度设置为略小于父可滚动窗格的宽度。这样当滚动条出现时，它对内容没有影响。

此 EXAMPLE 显示了实现该目标的更老套的方法，即硬编码 width，而不是尝试让浏览器通过 padding 为我们完成此操作。
如果可行，这是最简单的解决方案如果您不想要永久滚动条。

---

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

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

EXAMPLE

https://i.stack.imgur.com/fKp0z.png

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

---

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

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

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

---

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

body {
    padding-left: 15px;
}

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

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

---

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

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;
}

---

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

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

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 一样。

---

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

min-height: 101vh;

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

---