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 

它将会像这样，滚动条不再消失，就像我自己的情况一样：

我猜这是Chrome在MacOS上的一个bug，但我希望有一些CSS技巧可以解决这个问题。

- ApplePearPerson

---

我刚刚花了最近两个小时试图克服这个问题，它绝对是 chrome 的一个错误，在 stackoverflow 上非常令人恼火。 - blobbymatt

Answer 1

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

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

- bhovhannes

---

这个问题已经在Chrome v76中得到修复，该版本将于7月30日发布。 - ajay

Answer 2

从票据上看，他们提供了一个解决方法，直到问题得到解决：

进入您的“系统偏好设置”>“常规”。

选择“始终”。

请参考以下截图：

- Samuel Phan

---

这解决了我的Mac的问题，但不会为我的应用程序的任何用户修复它，因为他们可能只使用默认设置。 - ApplePearPerson

在Chrome 84上仍存在问题。根据您是否希望其可见，'滚动时'和'始终'都可以解决该问题。 - Punnerud

Answer 3

我们在使用相同操作系统版本和Chrome版本的Mac电脑时出现了问题。我们得出的最终结论如下：

• 使用苹果原装鼠标和触控板的用户能够正常查看。
• 当我们连接一个标准的USB鼠标到同一台电脑上时，在重新加载网页后，突然出现了烦人的滚动条。

这已经在三台不同的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 ;
}

- Andre_Saffin

---

你尝试过升级到Chrome v76吗？这已经修复了最初的问题。 - ApplePearPerson

我们都在使用Chrome版本76.0.3809.132（官方构建）（64位）。现在，我们已经找到了一种解决方案，可以根据我们的CSS强制出现或隐藏滚动条。 - Andre_Saffin