css修改浏览器滚动条

超、凢脫俗 2023-07-01 04:27 2阅读 0赞

<body class='scrollbar'>
    </body>

.scrollbar{ 
      /*三角箭头的颜色*/
      scrollbar-arrow-color: #fff;
      /*滚动条滑块按钮的颜色*/
      scrollbar-face-color: #cdcdcd;
      /*滚动条整体颜色*/
      scrollbar-highlight-color: #cdcdcd;
      /*滚动条阴影*/
      scrollbar-shadow-color: #cdcdcd;
      /*滚动条轨道颜色*/
      scrollbar-track-color: #515151;
      /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
      scrollbar-3dlight-color:#cdcdcd;
      /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
      scrollbar-darkshadow-color: #cdcdcd;
      /*滚动条基准颜色*/
      scrollbar-base-color: #cdcdcd;
    }
    /* chrome & safari 浏览器 */
    /*滚动条整体部分,必须要设置*/
    .scrollbar::-webkit-scrollbar{ 
      width: 0px;
      height: 0px;
      background-color: #cdcdcd;
    }
    /*滚动条的轨道*/
    .scrollbar::-webkit-scrollbar-track{ 
      background-color: #cdcdcd;
    }
    /*滚动条的滑块按钮*/
    .scrollbar::-webkit-scrollbar-thumb{ 
      border-radius: 0;
      background-color: #515151;
      /* box-shadow: inset 0 0 5px #515151; */
    }
    /*滚动条的上下两端的按钮*/
    .scrollbar::-webkit-scrollbar-button{ 
      height: 0;
      background-color: #cdcdcd;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 css美化浏览器滚动条

独使用css的方法虽然简单，但只有chrome兼容好，ie只能改滚动条颜色，火狐不支持css修改 1.先看chrome滚动条每部分的名字（直接引用的[https://w...

小灰灰/ 2024年04月17日 05:26/ 0 赞/ 89 阅读

相关修改浏览器滚动条，滚动条背景为白色

修改浏览器滚动条，滚动条背景为白色如图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

╰+攻爆jí腚メ/ 2023年07月24日 03:04/ 0 赞/ 22 阅读

相关 css修改浏览器滚动条

<body class='scrollbar'> </body> .scrollbar{ /三角箭头的颜色/ scrollb

超、凢脫俗/ 2023年07月01日 04:27/ 0 赞/ 3 阅读

相关 css 修改浏览器滚动条样式

本文是基于谷歌浏览器将原有的滚动条样式进行修改，修改结果如下所示。 ![在这里插入图片描述][20200107161430244.png] 代码如下： <sty

Love The Way You Lie/ 2023年06月28日 04:59/ 0 赞/ 67 阅读

相关 css修改谷歌浏览器和火狐浏览器的滚动条样式

css代码谷歌浏览器滚动条样式： ::-webkit-scrollbar { background: f7f7f9; width: .08

一时失言乱红尘/ 2023年02月18日 14:24/ 0 赞/ 376 阅读

相关修改滚动条默认样式（CSS）

[https://segmentfault.com/a/1190000021855840][https_segmentfault.com_a_1190000021855840]

我就是我/ 2023年02月17日 03:14/ 0 赞/ 18 阅读

相关 css修改滚动条样式

HTML代码： <div class="element"> 内容 </div> CSS代码： .element{ over

今天药忘吃喽~/ 2023年01月01日 01:41/ 0 赞/ 250 阅读

相关 CSS修改浏览器默认滚动条

css修改默认滚动条代码： /滚动条宽度/ .box-wrap::-webkit-scrollbar { width: 4px; }

刺骨的言语ヽ痛彻心扉/ 2022年12月02日 00:52/ 0 赞/ 241 阅读

相关 css修改滚动条的样式

滚动条默认样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

我就是我/ 2022年10月09日 03:11/ 0 赞/ 260 阅读

相关 css如何修改滚动条样式

默认滚动条样式如下： ![70][] 那如何修改呢？如下代码： <div class="inner"> <div class="innerbox

朱雀/ 2021年12月13日 05:02/ 0 赞/ 482 阅读