首页 > 解决方案 > 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,但不适用于其他浏览器。

你知道如何解决这个问题吗?

标签: cssscrollbar

解决方案


默认情况下,IE、Edge 和 Firefox 不支持它。这是文档 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar的屏幕截图

在此处输入图像描述

注意:您可以使用诸如 完美滚动条之类的 javascript 库


推荐阅读