css - MacOS Chrome 水平滚动条不消失

Question

我正在开发一个包含几个可水平滚动的组件的应用程序。我遇到了一些不需要的行为，水平滚动条不会消失，留下一个丑陋的长白色滚动条。

我在 MacOS 上的“显示滚动条”设置设置为“基于鼠标或触控板自动”。我的 chrome 是版本 72.0.3626.121(官方构建)(64 位)。

可以在下面的代码片段中重现该问题。

#horizontal {
    width: 100%;
    height: 150px;
    overflow-x: scroll;
    overflow-y: hidden;
    flex-direction: row;
    border: 2px solid purple;
    display: flex;
}

#vertical {
    width: 300px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    flex-direction: column;
    border: 2px solid purple;
    display: flex;
}

.horizontal-item {
  min-width: 100px;
  width: 100px;
  min-height: 100px;
  height: 100px;
  margin-right: 24px;
  margin-bottom: 24px;
  background-color: pink;
  display: flex;
}

.vertical-item {
  min-width: 100px;
  width: 100px;
  min-height: 100px;
  height: 100px;
  margin-right: 24px;
  margin-bottom: 24px;
  background-color: red;
  display: flex;
}

<div id="horizontal">
    <div class="horizontal-item">1</div>
    <div class="horizontal-item">2</div>
    <div class="horizontal-item">3</div>
    <div class="horizontal-item">4</div>
    <div class="horizontal-item">5</div>
    <div class="horizontal-item">6</div>
    <div class="horizontal-item">7</div>
    <div class="horizontal-item">8</div>
    <div class="horizontal-item">9</div>
    <div class="horizontal-item">10</div>
    <div class="horizontal-item">11</div>
    <div class="horizontal-item">12</div>
    <div class="horizontal-item">13</div>
    <div class="horizontal-item">14</div>
    <div class="horizontal-item">15</div>
    <div class="horizontal-item">16</div>
    <div class="horizontal-item">17</div>
    <div class="horizontal-item">18</div>
    <div class="horizontal-item">19</div>
    <div class="horizontal-item">20</div>
</div>

<div id="vertical">
    <div class="vertical-item">1</div>
    <div class="vertical-item">2</div>
    <div class="vertical-item">3</div>
    <div class="vertical-item">4</div>
    <div class="vertical-item">5</div>
    <div class="vertical-item">6</div>
    <div class="vertical-item">7</div>
    <div class="vertical-item">8</div>
    <div class="vertical-item">9</div>
    <div class="vertical-item">10</div>
    <div class="vertical-item">11</div>
    <div class="vertical-item">12</div>
    <div class="vertical-item">13</div>
    <div class="vertical-item">14</div>
    <div class="vertical-item">15</div>
    <div class="vertical-item">16</div>
    <div class="vertical-item">17</div>
    <div class="vertical-item">18</div>
    <div class="vertical-item">19</div>
    <div class="vertical-item">20</div>
</div>

当您将鼠标悬停在水平可滚动区域的底部(滚动条将出现的位置，容器的紫色底部和粉红色方 block )时，就会出现问题。滚动条会出现，再也不会离开。垂直可滚动区域不会发生同样的情况，滚动条也会出现但会消失。如果您在将鼠标悬停在底部之前滚动滚动条，那么如果您将鼠标悬停在滚动条出现的位置，则不会出现上述问题。

在下图中，我将鼠标悬停在水平可滚动区域的底部，它显示滚动条就在那里(之后它不会离开!)。

当我将鼠标悬停在 stackoverflow 代码块的水平滚动条上时，实际上也会出现此问题，导致文本难以阅读。

Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text 

它看起来像这样并且滚动条不会再像我自己的情况那样消失:

我假设这是 Chrome 和 MacOS 中的一个错误，但我希望我可以使用一些 CSS 技巧来解决这个问题。

Answer 1

这是 Chrome 问题:https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36

许多人正在添加滚动条大小 (25px) 的空白，以防止滚动条遮挡内容。这是解决方法，但只能视为临时解决方案。