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>

将鼠标悬停在水平可滚动区域的底部时会出现问题（因此滚动条出现的位置，容器的紫色底部带有粉红色方块）。滚动条将出现，永远不会再离开。垂直可滚动区域也不会发生同样的情况，滚动条也会出现但会消失。如果您在将鼠标悬停在底部之前滚动滚动条，则之后如果将鼠标悬停在滚动条出现的位置上，则不会出现问题。

在下面的图像中，我在水平可滚动区域的底部上方盘旋，它显示滚动条在那里（之后它不会离开！）。

当我将鼠标悬停在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 

它看起来像这样，滚动条不会像我自己的情况那样消失：

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

Answer 1

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

很多人都在添加滚动条大小（25px）的空白区域，以防止滚动条遮挡内容。它是解决方法，但可以仅作为临时解决方案考虑。

Answer 2

从故障单中，他们提供了一个解决方法，直到问题得到解决：

进入你的System Preferences> General

选择Always：