CSS3自定义滚动条

最新推荐文章于 2025-06-30 14:41:02 发布
最新推荐文章于 2025-06-30 14:41:02 发布
阅读量788 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css scrollbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/joyce_lcy/article/details/88315636
本文介绍了CSS3中如何自定义滚动条的样式，包括滚动条的整体部分、轨道、按钮、滑块、边角和调整大小的控件。通过一系列属性，可以实现滚动条的个性化设计。

(1) 属性

  • [1]::-webkit-scrollbar 滚动条整体部分
  • [2]::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • [3]::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
  • [4]::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
  • [5]::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • [6]::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • [7]::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

在这里插入图片描述

(2) 实例

在这里插入图片描述

<div id="wrapper">
    <div class="scrollbar" id="style-default">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-1">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-2">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-3">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-4">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-5">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-6">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-7">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-8">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-9">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-10">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-11">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-13">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-14">
        <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-15">
        <div class="force-overflow"></div>
    </div>
</div>

header
{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 25px;
}

#info
{
    font-size: 18px;
    color: #555;
    text-align: center;
    margin-bottom: 25px;
}

a{
    color: #074E8C;
}

.scrollbar
{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow
{
    min-height: 450px;
}

#wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 18px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    background-color: red;
    border: 6px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
    background: rgb(0,0,0);
    border: 4px solid transparent;
    background-clip: content-box;   /* THIS IS IMPORTANT */
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    background: rgb(25,25,25);
    border: 1px solid rgb(0,0,0);
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
    background-color: #0ae;

    background-image: -webkit-gradient(linear, 0 0, 0 100%,
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(122,153,217)),
    color-stop(0.72, rgb(73,125,189)),
    color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
    border: 1px solid black;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
    background-color: #000000;
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
    background-color: #F90;
    background-image: -webkit-linear-gradient(90deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
    background-color: #AAA;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg,
    rgba(0, 0, 0, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%,
    transparent 75%,
    transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #444444;
}

#style-12::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 25%,
    transparent 100%,
    rgba(0, 0, 0, 1) 75%,
    transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear,
    40% 0%,
    75% 84%,
    from(#4D9C41),
    to(#19911D),
    color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top,
    #e4f5fc 0%,
    #bfe8f9 50%,
    #9fd8ef 51%,
    #2ab0ed 100%);
}
css3关于滚动条的设置
liuhao9999的博客
05-19 548
/* 滚动条凹槽的颜色，还可以设置边框属性 */ *::-webkit-scrollbar-track-piece { background-color: #f8f8f8; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } /* 滚动条的宽度 */ *::-webkit-scrollbar { width: 7px; height: 7px; } /* 滚动条的设置 */ *::.
【CSS】自定义进度条
Jessieeeeeee的博客
06-23 486
自定义进度条样式
css 修改滚动条样式
子非渔
08-26 856
CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）...
CSS技巧：美化表格滚动条
最新发布
weixin_42596214的博客
06-30 833
在Webkit核心的浏览器中，我们可以使用伪元素来自定义滚动条的外观。例如，我们可以改变滚动条的宽度、颜色和背景。/* 全局设置滚动条样式 *//* 滚动条宽度 *//* 滚动条轨道的背景色 */有时候，我们可能希望滚动条的背景能够融入到页面的整体风格中。滚动条背景是指整个滚动条组件的背景色，包括轨道和滑块之外的区域。/* 自定义滚动条背景样式 *//* 当滚动条水平和垂直同时出现时，边角区域的背景色 */
CSS3自定义滚动条样式
weixin_33935777的博客
08-18 352
原文地址：→传送门 写在前面 滚动条是个很常见的东东，不过某些浏览器自带的滚动条确实不太好看啊，下面可以作为学习，探讨下自定义滚动条的实现，这样你的滚动条就可以美美的啦。但是，也只能玩玩，因为只针对webkit内核的浏览器啊啊啊啊啊！ overflow介绍 定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。 属性值 overflow:visible ...
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
CSS3自定义滚动条样式的示例代码
09-22
CSS3自定义滚动条样式技术是近年来Web开发中非常实用且受关注的一种样式控制方法。通过CSS3的伪元素选择器，可以对网页内的滚动条外观进行自定义设计，使滚动条与网站的整体风格更为协调，提升用户体验。 首先，...
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
以下是一个基本的自定义滚动条样式的示例代码详解： ```css /* 定义滚动条的整体宽度和高度 */ ::-webkit-scrollbar { width: 6px; /* 水平滚动条的宽度 */ height: 6px; /* 垂直滚动条的高度 */ background-...
css3 自定义滚动条样式
似水流年QC的博客
09-28 1176
目前市场现在浏览器自带的原始滚动条很不美观，简直就是页面的一大败笔， 不同的浏览器有着不同的展现样式，五花八门。同时也有看到很多网站的自定义滚动条显得高端，在体验上也显得舒服了很多，现在讲解一下自定义滚动条的实现。若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。
css 滚动条样式
weixin_30242907的博客
05-02 181
<!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html --> <html lang="en"><head><meta http-equiv="Content-Type" co...
css3自定义滚动条样式
一介布衣
09-26 460
这里写自定义目录标题滚动条的常用属性贴代码其他的CSS属性注意 滚动条的常用属性 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
前端 | CSS3 自定义滚动条样式 -webkit-scrollbar
weixin_41178008的博客
07-27 871
CSS3 自定义滚动条样式 -webkit-scrollbar 介绍 有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，今天给大家带来的是如何在 webkit 内核的浏览器中自定义滚动条。 webkit 支持拥有 overflow 属性的区域、列表框、下拉菜单以及 textarea 文本...
css3自定义滚动条
zhuyu19911016520
05-21 477
开发项目时，感觉浏览器自带的滚动条样式不太美观，也看到过微信公众号等一些网站对滚动条做了美化，今天就百度了一下，写篇自定义 滚动条的文章供大家参考 直接看代码：给整个body区域的滚动条改变样式 body::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } body...
css3做一个滚动条
AmberWu
06-12 997
滚动条的实现
css3设置滚动条
Focus-Fe
12-06 447
本文简单记录一下webkit下美化滚动条的一些方式：   下面这张图比较直观，来源于互联网，不追源了，感谢原作者。       ::-webkit-scrollbar 滚动条整体部分，一般可以设置宽度      2.  ::-webkit-scrollbar-button 两端的按钮      3.  ::-webkit-scrollbar-t...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值