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

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

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

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

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

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

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

• 你可以看下这个问题的回答https://ask.csdn.net/questions/745592
• 你也可以参考下这篇文章：如何去除页面的滚动条并且还可以用滚轮滚动页面？
• 除此之外, 这篇博客: 微信小程序点击按钮跳转界面中的 在微信小程序中 我们添加一个按钮，点击按钮想要跳转到自己的指定页面，直接上图： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 这是有返回键的：
  
  
  直接上代码：
  js

    goto: function () {
      wx.navigateTo({
        url: '../chart/chart',
      })
    },
  

  wxml

  <button bindtap="goto">跳转</button>
  

  以下是没有返回键的：
  
  直接上代码：
  wxml不改
  js

   goto: function () {
      wx.redirectTo({
        url: '../chart/chart',
      })
    },
  

• 您还可以看一下 刘伶华老师的软件测试经典面试题剖析课程中的 你觉得作为一名软件测试工程师，应该要具备什么素质？小节, 巩固相关知识点
  

设置滚动条相关属性需要考虑兼容性，不同浏览器设置滚动条的css类是不同的