Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

似乎是一个错误，我注意到重置项目的宽度（到任何值auto / 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;
}

Answer 2

我遇到了和你一样的情况（我想），我想要滚动功能，但我不想要滚动条。我也放了定制＆lt;和＆gt;在可见区域的末端分页控件以翻阅可滚动区域。所以滚动条只是让我讨厌。

您可以使用以下命令关闭给定类的滚动条：

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

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

希望这会有所帮助。

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

Answer 3

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

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

Answer 4

它需要替换为：

overflow: hidden;

相反。因为，这是说它的溢出是隐藏的，但是仍然可以向下滚动框，毗湿奴说了什么，你需要做display: none; 那就是说什么都不显示。

希望这会有所帮助！

Answer 5

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

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

您可以在此处了解更多信息：{{3}}。

Answer 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

Chrome会为滚动条保留空间，即使它已被隐藏

6 个答案: