在css样式中怎么设置浏览器滚动条样式

 时间:2026-02-13 11:29:33

1、新建html文档。

在css样式中怎么设置浏览器滚动条样式

2、书写hmtl代码。

<div>在css样式中怎么设置浏览器滚动条样式</div>

<div>步骤分两步:第一步写外层轨道;第二步写内层轨道</div>

在css样式中怎么设置浏览器滚动条样式

3、书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/} 

在css样式中怎么设置浏览器滚动条样式

4、书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}

在css样式中怎么设置浏览器滚动条样式

5、代码整体结构。

在css样式中怎么设置浏览器滚动条样式

6、查看效果。

在css样式中怎么设置浏览器滚动条样式

7、默认样式参考具体如下图:

1:scrollbar-face-color(设置滚动框和滚动条箭头的颜色)

2:scrollbar-highlight-color(设置滚动框的和滚动条箭头左上边缘的颜色)

3:scrollbar-shadow-color(设置滚动框的和滚动条箭头右下边缘的颜色)

4:scrollbar-3dlight-color(设置滚动框的和滚动条箭头左上边缘的颜色)

5:scrollbar-arrow-color(设置滚动条箭头的颜色)

6:scrollbar-track-color(设置滚动条轨迹组成部分的颜色)

8:scrollbar-dark-shadow-color(设置滚动条槽的颜色)

在css样式中怎么设置浏览器滚动条样式

  • 用CSS来控制实现div的外边距margin
  • js如何替换div里面的内容
  • js实现单个div上下左右移动
  • kindeditor使用方法
  • html5如何引用外部的js文件
  • 热门搜索
    尿频是怎么回事 无线网卡怎么收费 dance怎么读 actress怎么读 抖音怎么拍 学分绩点怎么算 花王纸尿裤怎么样 学信网在线验证码怎么获取 可乐鸡翅怎么做好吃 肺纤维化是怎么回事