CSS3自定义滚动条样式方法

Bertha 。 2024-04-20 10:23 2阅读 0赞

该代码收集于网上资源,非原创

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
            ::-webkit-scrollbar {
                width: 10px;
                /*对垂直流动条有效*/
                height: 10px;
                /*对水平流动条有效*/
            }
    
            /*定义滚动条的轨道颜色、内阴影及圆角*/
            ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                background-color: rosybrown;
                border-radius: 3px;
            }
    
            /*定义滑块颜色、内阴影及圆角*/
            ::-webkit-scrollbar-thumb {
                border-radius: 7px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                background-color: #da4744;
            }
    
            /*定义两端按钮的样式*/
            ::-webkit-scrollbar-button {
                background-color: #da4744;
            }
    
            /*定义右下角汇合处的样式*/
            ::-webkit-scrollbar-corner {
                background: da4744;
            }
    
            ::-webkit-scrollbar-track-piece {
                background-color: #e64747;
            }

转载于:https://www.cnblogs.com/ncellit/p/11437779.html

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 css自定义滚动条样式

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

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

相关 css3自定义滚动条

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

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

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

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

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

相关自定义滚动条样式

/ 滚动条的宽度 / ::-webkit-scrollbar { width: 7px; height: 7px; }

迷南。/ 2022年02月26日 09:35/ 0 赞/ 316 阅读

相关 css3定义滚动条样式

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

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

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

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

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

相关 css 定义滚动条样式

在使用了overflow产生滚动条的选择器里,只对谷歌浏览器有效选择器::-webkit-scrollbar 滚动条整体部分设置dis

小灰灰/ 2021年07月25日 02:54/ 0 赞/ 489 阅读