css3自定义滚动条

刺骨的言语ヽ痛彻心扉 2022-05-24 05:18 325阅读 0赞

开发项目时，感觉浏览器自带的滚动条样式不太美观，也看到过微信公众号等一些网站对滚动条做了美化，今天就百度了一下，写篇自定义 滚动条的文章供大家参考  
直接看代码：给整个body区域的滚动条改变样式

body::-webkit-scrollbar {/*滚动条整体样式*/
    	width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    	height: 1px;
    }
    body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    	border-radius: 10px;
    	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    	background: #535353;
    }
    body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    	border-radius: 10px;
    	background: #EDEDED;
    }

改变后的效果如下：右侧的滚动条改为了其他的颜色  
![这里写图片描述][70]

上面是对整个页面滚动条的修改，也可以针对某个div区域的修改，  
在 div 上加个样式 class=“info2”，再在样式表中使用下面的就是把body改为具体某个区域的样式

.info2::-webkit-scrollbar {/*滚动条整体样式*/
    	width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    	height: 1px;
    }
    .info2::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    	border-radius: 10px;
    	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    	background: #535353;
    }
    .info2::-webkit-scrollbar-track {/*滚动条里面轨道*/
    	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    	border-radius: 10px;
    	background: #EDEDED;
    }

效果图  
![这里写图片描述][70 1]  
OK了。。。

[70]: /images/20220524/97bebe9985584ee2bea3a9f2e2ceed71.png
[70 1]: /images/20220524/48f2304e5be8431ab3d56e314051bc36.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS3自定义滚动条样式方法

代码收集于网上资源,非原创 /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar {...

Bertha 。/ 2024年04月20日 10:23/ 0 赞/ 73 阅读

相关 CSS3自定义滚动条样式

自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分 1. ::-webkit-scrollbar 滚动

心已赠人/ 2023年06月15日 11:06/ 0 赞/ 8 阅读

相关 CSS3自定义滚动条样式 -webkit-scrollbar

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的 C

布满荆棘的人生/ 2023年01月13日 01:38/ 0 赞/ 217 阅读

相关 css自定义滚动条

.box::-webkit-scrollbar { width: 6px; height: 200px; }

梦里梦外;/ 2023年01月06日 15:54/ 0 赞/ 176 阅读

相关 CSS3自定义滚动条的样式

webkit浏览器是如何自定义滚动条的呢？滚动条demo(只在谷歌浏览器中有效)： demo1：[演示一][Link 1] demo2:[演示二][L

偏执的太偏执、/ 2022年06月16日 08:09/ 0 赞/ 327 阅读

相关 css自定义滚动条样式

代码 css自定义滚动条样式，webkit内核浏览器。 / 滚动条样式 / ::-webkit-scrollbar { / 滚动条的宽度 / width

偏执的太偏执、/ 2022年05月25日 11:05/ 0 赞/ 295 阅读

相关 css3自定义滚动条

开发项目时，感觉浏览器自带的滚动条样式不太美观，也看到过微信公众号等一些网站对滚动条做了美化，今天就百度了一下，写篇自定义滚动条的文章供大家参考直接看代码：给整个bod

刺骨的言语ヽ痛彻心扉/ 2022年05月24日 05:18/ 0 赞/ 326 阅读

相关 CSS3自定义滚动条样式 -webkit-scrollbar

> 概述: > > 当内容超出容器时，容器会出现滚动条，其自带的滚动条不美观，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部

Bertha 。/ 2022年04月24日 12:54/ 0 赞/ 309 阅读

相关 css3定义滚动条样式

/定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { width: 16px;

墨蓝/ 2021年07月26日 17:20/ 0 赞/ 468 阅读

相关 CSS - 使用css自定义滚动条样式

使用css自定义滚动条样式一. 隐藏滚动条二. 修改滚动条样式 Chrome（WebKit的浏览器） IE浏览器一. 隐藏

以你之姓@/ 2021年07月26日 01:49/ 0 赞/ 590 阅读