css - Chrome:同时应用两个滚动条时的自定义滚动条问题
问题描述
在 Chrome/Safari/new Edge 中检查以下代码段,并将容器滚动到最底部:
body { background-color: #fff }
section {
background-color: #f8f8f8;
width: 400px;
height: 150px;
padding: 10px;
overflow: overlay;
}
.force-overflow {
background-image: linear-gradient(45deg, orange, yellow, orange);
height: 600px;
}
::-webkit-scrollbar {
background-color: #F5F5F5;
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #F5F5F5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
background: #999;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
}
::-webkit-scrollbar-corner {
background: transparent;
}
<section>
<div class="force-overflow"></div>
</section>
这按预期工作。
现在如果我们也添加一个水平溢出:
body { background-color: #fff }
section {
background-color: #f8f8f8;
width: 400px;
height: 150px;
padding: 10px;
overflow: overlay;
}
.force-overflow {
background-image: linear-gradient(45deg, orange, yellow, orange);
height: 600px;
width: 1200px;
}
::-webkit-scrollbar {
background-color: #F5F5F5;
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #F5F5F5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
background: #999;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
}
::-webkit-scrollbar-corner {
background: transparent;
}
<section>
<div class="force-overflow"></div>
</section>
并滚动到最右边/底部,我们得到这个:
我知道我可以使用overflow: auto;
代替来解决这个问题overflow: overlay;
,但我真的很想坚持下去,overlay
因为它可以防止你的布局在滚动条出现/消失时立即“跳跃”。
有谁知道如何解决这个问题?
解决方案
一个 hacky 解决方案是添加一些 box-shadow 来覆盖这部分:
::-webkit-scrollbar-thumb:horizontal {
box-shadow: 3px 0 0 0;
}
::-webkit-scrollbar-thumb:vertical {
box-shadow: 0 3px 0 0;
}
body { background-color: #fff }
section {
background-color: #f8f8f8;
width: 400px;
height: 200px;
padding: 10px;
overflow: overlay;
}
.force-overflow {
background-image: linear-gradient(45deg, orange, yellow, orange);
height: 800px;
width: 1200px;
}
::-webkit-scrollbar {
background-color: #F5F5F5;
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #F5F5F5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
background: #999;
color:#999;
transition-duration: 2s;
}
::-webkit-scrollbar-thumb:horizontal {
box-shadow: 3px 0 0 0;
}
::-webkit-scrollbar-thumb:vertical {
box-shadow: 0 3px 0 0;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
color:#444;
transition-duration: 2s;
}
::-webkit-scrollbar-corner {
background: transparent;
}
<section>
<div class="force-overflow"></div>
</section>
推荐阅读
- json - 如何从返回 JSON 的 Web 服务中提供视图?
- google-bigquery - 在 Google BigQuery UI 中识别奇怪查询的来源
- dita - dita-topic 标题的单独封面
- c# - 来自多个 from 语句的 LINQ 查询投影
- java - 在 Spring Boot 的 application.properties 中使用系统变量
- azure-sql-database - LKM 将数据从 Oracle 12c 加载到 Azure 上的 SQL 数据库的问题
- reactjs - 在 SSR 应用程序上加载有关 redux 初始状态的服务器数据
- python - Python,熊猫根据停止条件查找每行的长度
- android - 由 Arduino 信号驱动的线程中运行的计数器会跳过前几个数字
- python - 从二维数组中删除行?