css - 如何使 Scroll 在 Firefox 中可见
问题描述
我有一个在 chrome 中可见的滚动条,但它不支持 firefox。任何建议。
<div class="item-list">
</div>
.item-list::-webkit-scrollbar {
-webkit-appearance: none;
-moz-appearance:none;
width: 10px;
}
.item-list::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 80px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
解决方案
编辑 css 你必须添加 -moz-appearance 行。您可以在下面的链接中找到详细信息;
样本
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
细节
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.item-list {
scrollbar-color: rgba(255,255,255,.5);
scrollbar-width: thin;
}
.item-list::-webkit-scrollbar {
-webkit-appearance: none;
-moz-appearance:none;
width: 10px;
}
.item-list::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 80px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
如果要始终显示滚动条,则必须使用 min-height css
.insider {min-height:250px; }
.item-list { width: 200px; height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); }
.item-list {
scrollbar-color: rgba(255,255,255,.5);
scrollbar-width: thin;
}
.item-list::-webkit-scrollbar {
-webkit-appearance: none;
-moz-appearance:none;
width: 10px;
}
.item-list::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 80px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
<div class="item-list">
<div class="insider">
</div>
</div>
推荐阅读
- javascript - JSON 仅解析上次调用的新项目
- r - Cholmod 错误“问题太大”到底是什么意思?将 dfm 转换为 df 时出现问题
- android - Kotlin如何实现android setOnClickListener之类的语法
- hbase - clone_snapshot 和 copyTable 有什么区别?
- python - 我可以从 Power BI 中的个人 Python 脚本调用函数吗
- jenkins - Jenkins 在 Mac 系统上构建期间未能生成新进程
- css - 当其他列只有一个项目时,如何对一列中的项目数组使用网格布局?
- ssl - Terraform Init/apply/destroy - SSL 连接问题
- php - 如何在后端的laravel中从数据库中获取数据的分页
- r - spatstat 中 Cox 过程模型中簇大小的含义