MacOS Chrome水平滚动条不消失

Question

我正在开发一个具有一些可水平滚动的组件的应用程序。我遇到了一些不需要的行为，其中水平滚动条不会消失，留下难看的白色长滚动条。

在MacOS上，我的“显示滚动条”设置被设置为“自动基于鼠标或触控板”。我的镶边是版本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：

Answer 3

我们在具有相同OS版本，相同chrome版本的Mac中一直遇到此问题。我们得出的最终结论如下：

• 使用Apple Original鼠标和触控板的人可以看到所有正常情况。
• 当我们使用一台标准USB鼠标连接到同一台计算机时，重新加载网络后，我们突然得到了令人讨厌的滚动条。

它已经过测试，并且在3种不同的MacBook Pro中也发生了同样的情况。

我在此处上传视频，插拔电源后会发生什么情况：https://youtu.be/AGTF2Ltuxnk

编辑

我们的自定义解决方案是阻止默认滚动条并设置我们自己的滚动条，这些滚动条仅在需要时显示。

::-webkit-scrollbar-track {
  display: none;
  border-color: transparent;
  background-color:transparent;
}
 ::-webkit-scrollbar * {
  background:transparent;
}
  ::-webkit-scrollbar {
  width:rem(7);
  min-width:rem(7);
  height:rem(7);
  min-height:rem(7);
}
::-webkit-scrollbar-corner {
  background-color:transparent;
}
 ::-webkit-scrollbar-thumb {
  border-radius:rem(10);
  background-color:#666;
  -webkit-box-shadow: inset 0 0 0 ;
}