css - MacOS Chrome 水平滚动条没有消失
问题描述
我正在开发一个包含一些可水平滚动的组件的应用程序。我遇到了一些不需要的行为,其中水平滚动条没有消失,留下一个丑陋的长白色滚动条。
我在 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 技巧来解决这个问题。
解决方案
这是 Chrome 问题:https ://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
许多人正在添加滚动条大小(25px)的空白区域,以防止滚动条遮挡内容。这是一种解决方法,但只能被视为临时解决方案。
推荐阅读
- java - 使用带有 set 和 get 方法的布尔值
- java - 是否可以反转列表视图中的顺序?
- python-3.x - 为庞大的数据集创建虚拟对象时,Datalab 内核崩溃
- angular - 放置我的构造函数后,'ngOnInit' 上的分页和排序不起作用
- python - 源错误消息="索引 '('d1', 'i1')' 对索引组件 'NFix' 无效"
- c# - 多个完全松散映射 SolrNet Init
- powershell - 在 RingCentral 中以编程方式创建任务
- javascript - 减慢圆碰撞分辨率的运动
- terser - Terser - 当原始地图文件还包含源时如何包含源?
- python - Python 条件正则表达式