css - CSS滚动条在Chrome之外不起作用?
问题描述
我正在使用这个 CSS 代码来自定义我的滚动条样式:
::-webkit-scrollbar {
width: 8px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: black;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #59e5f6;
border-radius: 10px;
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: black;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
body {
scrollbar-face-color: black;
}
它适用于 Chrome,但不适用于其他浏览器。
你知道如何解决这个问题吗?
解决方案
默认情况下,IE、Edge 和 Firefox 不支持它。这是文档 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar的屏幕截图
注意:您可以使用诸如 完美滚动条之类的 javascript 库
推荐阅读
- function - Sharepoint 如何更改新文档的功能
- javascript - Jest 模拟不适用于 react-native 输入
- javascript - Vue JS:同时获取输入数组的唯一ID和值
- uwp - 如何使用 UWP Backbround Task 从本地存储(比如 "C:\\" )读取文件?
- javascript - React 中通过 ID 访问 DOM 元素
- flutter - Flutter 实现重复 Elastic 动画
- python - 如何从列表中创建嵌套列表,其中值是列表项的计数 Python
- polymer - 我应该使用属性或属性来传递数据吗?
- javascript - 如何使用 java 脚本仅从具有带扩展名的文件名的路径中修剪文件名?
- ios - 如何使用 SceneKit iOS 将背面图像添加为纹理