logo标签列表

即使滚动条被隐藏，Chrome仍会为其保留空间。

htmlcssgoogle-chromesafariopera
18
我在 Webkit 浏览器上遇到了一个问题 (IE 和 FF 没有问题)，即使滚动条没有显示，滚动条空间仍然被保留。你可以看到在示例中，一旦中间的元素被悬停，滚动条空间仍然被保留。我只是想知道这是 Chrome 的问题还是 HTML/CSS 规范的一部分。这个类似的 question 提供了一个解决方法，但它并没有说明这是否是一个 bug，而且必须在子元素上设置显式宽度，这不是我想要做的。 

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

1
这可能是Blink和Webkit中的一个bug。你应该肯定地报告这个问题。 我只在Firefox中测试过，它表现正常。 我进行了更多的测试，Chrome似乎只对文本有正确的反应。 这是正确的行为http://jsfiddle.net/650pyaq2/1/ 这是错误的行为http://jsfiddle.net/re4o23zr/ - user3448600
6个回答
2
如果您不想看到滚动条，请尝试以下方法（对我有用）：
.class::-webkit-scrollbar {
 display : none;
}
2

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

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

你可以在这里阅读更多关于此的信息：::-webkit-scrollbar。
0
我遇到了与你类似的情况（我想），我想要滚动功能，但我不想要滚动条。我还在可见区域的末端放置了自定义的<和>分页控件，以浏览可滚动区域。所以滚动条只是让我感到烦恼。
您可以使用以下代码关闭给定类的滚动条：
.class::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
}

没有设置高度为0，我看到了一个与滚动条一样高的空白区域并且它侵占了内容。一旦我在CSS中添加了高度为0，它就消失了，现在一切都好了。

希望这可以帮助你。

现在我要去看看是否可以在Edge、IE和Firefox上找到同样的东西。这在Chrome和Safari上有效。

0

看起来像是一个bug，我注意到在重置项目的宽度（任何值自动/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;
}
0
我在Ionic 5上看到了这个令人烦恼的问题，但只在Windows和Chrome中出现。我找到的解决方案是在global.scss中添加以下内容：app-root。
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
0

它需要被替换为：

overflow: hidden;

相反。 因为它在说它的溢出被隐藏了， 但仍然可以向下滚动盒子， 而Vishnu说，您需要执行display: none; 这是在说不显示任何内容。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接