怎么修改浏览器页面滚动条样式？

Question

我想修改浏览器页面滚动条的滑块样式为红色,悬停时为黑色代码如下：

::-webkit-scrollbar-thumb{
            border-radius: 5px;
            background-color: #ff0000
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #000
        }

当我查看页面效果时却没有生效，怎么解决呢？

Answer 1

给滚动条设置一个宽度就可以了

/* 选择要修改的滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb{
   border-radius: 5px;
   background-color: #ff0000
}
::-webkit-scrollbar-thumb:hover {
   background-color: #000
 }