MacOS Chrome 水平滚动条没有消失

Posted 2023-03-06

【中文标题】MacOS Chrome 水平滚动条没有消失

【英文标题】：MacOS Chrome horizontal scrollbar not disappearing

【发布时间】：2019-07-09 17:14:42

【问题描述】：

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

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

这个问题可以在下面的sn-p中重现。

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

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

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

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

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 技巧来解决这个问题。

【问题讨论】：

我刚刚花了 2 个小时试图解决这个问题，这绝对是 chrome 中的错误，在 *** 上非常烦人

【参考方案1】：

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

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

【讨论】：

这一问题已在 7 月 30 日发布的 Chrome v76 中得到修复。

【参考方案2】：

从票证中，他们给出了解决方法，直到问题得到解决：

进入你的System Preferences > General

选择Always：

【讨论】：

这为我的 mac 修复了它，但不会为我的应用程序的任何用户修复它，他们可能只是使用默认设置。

Chrome 84 上仍然存在问题。“滚动时”和“始终”都可以解决问题，具体取决于您是否希望它可见。

【参考方案3】：

我们在具有相同操作系统版本、相同 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 ;

【讨论】：

您是否尝试过升级到 Chrome v76？这已经解决了原来的问题。

我们都在使用 Chrome 版本 76.0.3809.132（官方版本）（64 位）。现在我们找到了一个解决方案，根据我们的 css 强制滚动条出现或隐藏。