自定义滚动条样式

最新推荐文章于 2021-07-30 09:06:27 发布
最新推荐文章于 2021-07-30 09:06:27 发布
阅读量211 收藏
点赞数
分类专栏： Web 文章标签： css 滚动条

自定义滚动条样式

我们可以通过 CSS 来设定滚动条的样式，此文适用于 webkit 内核的浏览器。

DEMO 样例

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>CSS3自定义滚动条-轩枫阁</title>
  <style>
    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: 12px;
      background-color: #f5f5f5;
    }

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

    /*
     *  STYLE 2
     */

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

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

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

    /*
     *  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(0.5, rgba(255, 255, 255, 0.2)),
        color-stop(0.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, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.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, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.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, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 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(0.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%);
    }
  </style>
</head>

<body>
  <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>
</body>

</html>

参考链接：

sigmarising
关注
专栏目录
自定义滚动条的样式
郭宝的博客
09-10 159
核心代码： /* 设置滚动条整体部分的样式 */ ::-webkit-scrollbar { /* 滚动条整体的宽度及颜色 */ width: 2px; background-color: #F1F1F1; } /* 滚动外层样式 */ ::-webkit-scrollbar-track { border-radius: 5...
滚动条样式锦集
weixin_34090643的博客
02-18 111
1.带背景颜色的实线边框滚动条  &lt;DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid;SCROLLBAR-FACE-COLOR: #006600; SCROLLB...
CSS3自定义滚动条样式的示例代码
09-22
CSS3自定义滚动条样式技术是近年来Web开发中非常实用且受关注的一种样式控制方法。通过CSS3的伪元素选择器，可以对网页内的滚动条外观进行自定义设计，使滚动条与网站的整体风格更为协调，提升用户体验。 首先，...
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
利用div+jquery自定义滚动条样式的2种方法
01-21
最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于...接下来就是重点了，如何修改滚动条的样式呢？ 经过从网上的不断搜索，发现有两
自定义滚动轴样式
qq_36340642的博客
05-10 531
/* 自定义滚动轴样式 */ ::-webkit-scrollBar {   width: 7px;/*垂直方向的宽*/   height: 7px;/*水平方向的宽*/ } ::-webkit-scrollBar-thumb {   border-radius: 5px;   background: #F90;   box-shadow: inset 0 0 5px rgba(0
程序分享如何实现实时滚动条效果类Mathematica的manipulate-manipulate.m
08-12
程序分享如何实现实时滚动条效果类Mathematica的manipulate-manipulate.m 大家知道，在MATLAB中的滚动条控件是“非实时”的。所谓非实时，指的是用户在拖动滚动条时，滚动条的callback函数不会被触发，只有放开滚动条后，callback函数才会被调用一次。 但是，有的时候我们可能会有这样的需要：比如我们在窗口中做出了一个y = f函数的图形，这个函数有几个参数a, b, c ... 然后我们希望通过用滚动条的形式来改变这些参数的数值，并实时地在窗口中观察参数改变后的图形的结果。但直接使用滚动条控件的话，拖动滚动条时图形不会更新。想看到参数连续变化时对图形的影响，就只能一下一下地点击滚动条两端的箭头，非常繁琐。 这个功能在Mathematica下用manipulate命令就非常容易实现。但是在MATLAB下却一直没有提供具有类似功能的函数。所以我自己写了一个MATLAB的manipulate版本。当然，现在这个版本只能实现最基本的2D plot对象。至于其他类型的图形对象，我会在以后慢慢添加。 后 （或者在 http://www.mathworks.com/matlabcentral/fileexchange/36512-manipulate-interactive-parametrized-plotting 下载，帮我增加点人气） 在命令行中输入 manipulate复制代码 即可看到如下图所示的界面，用户可以随意拖动滚动条，axes中的内容会实时更新。 manipulate_demo.gif 实时滚动条效果演示 用户也可以使用自己给定的函数，并且可以操纵任意数目的参数，比如下列语句： manipulate*x param),[-10:10],[2 0]},{[-10 10],[-10 10]}, {1,'Slope',1 10}, {2,'Shift',-5 5})复制代码 会产生一条直线，用户可以操纵其斜率和截距。 更多使用方法请看函数自带的帮助（英文）。 欢迎提出宝贵意见。
css 自定义滚动条样式
luckydog
05-08 239
说明： ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-...
CSS 滚动条: 自定义滚动条样式
超悠閒的博客
07-30 1995
CSS 滚动条: 自定义滚动条样式 文章目录CSS 滚动条: 自定义滚动条样式前言正文overflow & ::-webkit-scrollbar实际效果（自定义滚动条、隐藏滚动条）结语其他资源参考连接完整代码示例 前言 本篇来介绍如何为自己的网页定制化自己的滚动条 正文 由于滚动条大部分时候其实是属于浏览器管控的元素，所以我们只能透过一些伪类的方式来影响它的样式。本篇介绍的是专用于 webkit 引擎上生效的写法 overflow & ::-webkit-scrollbar 与滚动条相关的
自定义滚动条样式生成工具
在实际应用中，滚动条代码生成器会提供一个用户界面，允许用户选择颜色、阴影和其他视觉效果，然后自动生成相应的CSS代码，开发者只需将这段代码插入到网页的样式表中，即可实现自定义滚动条效果。 滚动条代码生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值