Chrome 为滚动条保留空间，即使它是隐藏的答案

【问题标题】：Chrome reserves space for scrollbar even if it is hiddenChrome 为滚动条保留空间，即使它是隐藏的
【发布时间】：2014-11-14 13:47:46
【问题描述】：

我在 webkit 浏览器（IE 和 FF 都可以）上遇到了一个问题，其中滚动条空间是为元素保留的，即使滚动条没有显示。您可以在示例中看到，一旦将中间的鼠标悬停，滚动条空间仍会保留。我只是想知道这是 Chrome 的问题还是只是 HTML/CSS 规范的一部分。这个类似的question 提供了一个修复，但它没有解释它是否是一个错误，并且必须为孩子设置一个明确的宽度不是我想要做的。

        .hidden-scroll {
            background: black;
            overflow-y: hidden;
            height: 400px;
            width: 300px;
        }

        .hidden-scroll:hover {
            overflow-y: auto;
        }

        .no-hover.hidden-scroll:hover {
            overflow-y: hidden;
        }

        .hidden-scroll-content {
            background: red;
            height: 50px;
        }

<body>
<div>No scroll needed</div>


<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
</div>

<div>Scroll on hover</div>

<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>

<div>No scroll on hover</div>

<div class="no-hover hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>


</body>

【问题讨论】：

这可能是 Blink & Webkit 中的错误。你一定要报告这个。我只在 Firefox 中进行了测试，它运行正常。我又做了一些测试，Chrome 似乎只能正确处理文本。这是正确的行为jsfiddle.net/650pyaq2/1 这是错误的行为jsfiddle.net/re4o23zr

标签： html css google-chrome safari opera

【解决方案1】：

似乎是一个错误，我注意到在重置项目的宽度（自动/100% 的任何值）后，框被重新绘制并正确布局，直到另一个悬停，好吧，一会儿一些 hacky hack 怎么样？ Hacky demo

.wrapper {
    height:400px;
    width:300px;
    overflow:hidden;
}

.wrapper:hover .hidden-scroll {
    width:300px;
}

.wrapper:hover .hidden-scroll div {
    padding-right:0;
}

.hidden-scroll {
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  height: 400px;
  width: 330px;
}

.hidden-scroll div {
  background: red;
  height: 50px;
  width: auto;
  padding-right:30px;
}

【讨论】：

【解决方案2】：

我遇到了和你一样的情况（我想），我想要滚动功能但我不想要滚动条。我还在可见区域的末端放置了自定义的分页控件，以在可滚动区域中进行分页。所以滚动条让我很烦。

您可以通过以下方式关闭给定类的滚动条：

.class::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
}

没有高度：0，我看到滚动条高度的空白区域，它正在吞噬内容。一旦我将 height:0 添加到这个 CSS 中，它就消失了，一切都很好。

希望这会有所帮助。

现在我要去看看是否可以为 Edge、IE 和 Firefox 找到相同的东西。这适用于 Chrome 和 Safari。

【讨论】：

【解决方案3】：

如果您不想看到滚动条，请尝试（为我工作）

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

【讨论】：

【解决方案4】：

需要替换为：

overflow: hidden;

相反。因为它说它的溢出是隐藏的，但仍然能够向下滚动框，而毗湿奴所说的，你需要做display: none; 也就是说不显示任何内容。

【讨论】：

【解决方案5】：

在::-webkit-scrollbar 中使用overflow: hidden; 对我有用。

[className]::-webkit-scrollbar {
  overflow: hidden;
}

您可以在此处阅读更多信息：::-webkit-scrollbar。

【讨论】：

【解决方案6】：

我在 Ionic 5 上看到过这个烦人的问题，但仅限于 Windows 和 Chrome。我找到的解决方案是将其添加到 app-root 中的 global.scss 中：

ion-content {
  width: 102% // Solve empty space left for scrollbar on Windows/Chrome
}

实际上并没有在页面上错位太多，所以我不需要调整其他任何东西。如果您确实需要，请发布您的修改。

更新 - 决定通过以下方式修复右侧的空间：

--padding-end: 2%; // Solve empty space left for scrollbar on Windows/Chrome

【讨论】：