欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由前端林子发表

本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。

0.需求

有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。那么如何自定义滚动条的样式呢？下面一起来看看吧。

1 基础知识

1.1 Webkit内核的css滚动条选择器

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

属性：

::-webkit-scrollbar — 整个滚动条

::-webkit-scrollbar-track — 滚动条轨道

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner — 边角，即当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

注意：

(1)浏览器的支持情况：

::-webkit-scrollbar 仅仅在支持Webkit的浏览器 (Chrome, Safari)可以使用。

(2)可设置竖直/水平方向的滚动条

可以设置水平方向的滚动条(:horizontal)，不加默认是竖直方向(:vertical)。

(3)滚动条上的按钮（:decrement、:increment）

可以设置图片，这点会在下面demo中展示。

1.2 IE自定义滚动条样式

可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。这里我只列举了部分样式，诸如scrollbar-3dlight-color、scrollbar-highlight-color等样式试了下没有效果，这里不再列出：

scrollbar-arrow-color — 滚动条三角箭头的颜色 scrollbar-face-color — 滚动条上滚动滑块颜色

scrollbar-track-color— 滚动条轨道、按钮背景的颜色 scrollbar-shadow-color— 滚动框上滑块边框的颜色

2.demo快速上手

2.1 Webkit内核的浏览器自定义滚动条样式 (chrome, safari)

如果觉得上述说明有些抽象，可以直接在浏览器中打开demo，结合demo中的注释来理解各个属性的意义。图中我对其中的一些属性做了标注，滚动条外层轨道属性并未在图中标注，可打开chrome浏览器控制台查看属性：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>scrollbar的demo--lynnshen</title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    .scolltable {

      width: 500px;

      height: 300px;

      border: 1px solid black;

      /*实现水平垂直居中*/

      position: absolute;

      left: 50%;

      top: 50%;

      margin-left: -250px;

      margin-top: -150px;

      overflow: scroll;

    }

    .content {

      /*要设的比.scolltable更宽一些*/

      width: 600px;

    }

    /*整个滚动条*/

    ::-webkit-scrollbar {

      width: 24px;

      background-color: transparent;

    }

    /*水平的整个滚动条*/

    ::-webkit-scrollbar:horizontal {

      height: 24px;

      background-color: transparent;

    }

    /*滚动条轨道*/

    ::-webkit-scrollbar-track {

      background-color: #f6f8fc;

      border-right: 1px solid #f1f5fa;

      border: 1px solid #f1f5fa;

      ;

    }

    /*竖直的滑块*/

    ::-webkit-scrollbar-thumb {

      background-color: rgba(220, 228, 243, 1);

      border-radius: 0px;

      border-top: 1px solid #edf2f9;

      border-bottom: 1px solid #edf2f9;

      border-left: 1px solid #f1f5fa;

    }

    /*水平的滑块*/

    ::-webkit-scrollbar-thumb:horizontal {

      /* background-color: rgba(220, 228, 243, 1); */

      border-radius: 0px;

      border-top: 1px solid #edf2f9;

      /* border-right: 1px solid #f1f5fa;

      border-left: 1px solid #f1f5fa; */

    }

    /*滚动条上的按钮--竖直滚动条向上*/

    ::-webkit-scrollbar-button:decrement {

      border-bottom: 1px solid #edf2f9;

      height: 26px;

      background: url("./images/scroll_up.png") 7px 9px no-repeat;

      border-right: 1px solid #f1f5fa;

      border-left: 1px solid #f1f5fa;

    }

    /*滚动条上的按钮--竖直滚动条向下*/

    ::-webkit-scrollbar-button:increment {

      border-top: 1px solid #edf2f9;

      height: 26px;

      background: url("./images/scroll_down.png") 7px 10px no-repeat;

      border-right: 1px solid #f1f5fa;

      border-left: 1px solid #f1f5fa;

      border-bottom: 1px solid #f1f5fa;

    }

    /*滚动条上的按钮--水平滚动条向左*/

    ::-webkit-scrollbar-button:horizontal:decrement {

      border-top: 1px solid #edf2f9;

      width: 26px;

      background: url("./images/scroll_left.png") 9px 7px no-repeat;

      border-top: 1px solid #f1f5fa;

      border-bottom: 1px solid #f1f5fa;

      border-right:1px solid #f1f5fa;

    }

    /*滚动条上的按钮--水平滚动条向右*/

    ::-webkit-scrollbar-button:horizontal:increment {

      border-top: 1px solid #edf2f9;

      width: 25px;

      background: url("./images/scroll_right.png") 10px 7px no-repeat;

      border-left:1px solid #f1f5fa;

    }

    /*边角*/

    ::-webkit-scrollbar-corner{

      border:1px solid #dce4f3;

    }

  </style>

</head>

<body>

  <div class="scolltable">

    <div class="content">

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

    </div>

  </div>

</body>

</html>

实现效果：

WebKit内核的浏览器

说明：

(1)滚动条两端的按钮使用的图片，四个角分别使用了四张图片;

(2).scolltable实现了水平垂直居中的效果，具体方法是：使用绝对对位，将元素的定点定位到body的中心。然后使用负margin（即元素宽高的一半）将其拉回到body的中心。

2.2 IE自定义滚动条样式

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>scrollbar for IE--lynnshen</title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    .scolltable {

      width: 500px;

      height: 300px;

      border: 1px solid black;

      /*实现水平垂直居中*/

      position: absolute;

      left: 50%;

      top: 50%;

      margin-left: -250px;

      margin-top: -150px;

      overflow: scroll;

      scrollbar-face-color:greenyellow;

      scrollbar-arrow-color:goldenrod;

      scrollbar-shadow-color:red;

      scrollbar-track-color:pink;

    }

    .content {

      /*要设的比.scolltable更宽一些*/

      width: 600px;

    }

  </style>

</head>

<body>

  <div class="scolltable">

    <div class="content">

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

    </div>

  </div>

</body>

</html>

实现效果：

3.小结

本文主要是想记录下在Webkit内核的浏览器和IE中，如何自定义滚动条的样式，并分别提供了两个demo。如有问题，欢迎指正。

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

如何自定义CSS滚动条的样式？的更多相关文章

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等
友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...
[分享] 通过修改CSS自定义chrome滚动条样式
首先得说一句我不懂CSS的写法之类的这段CSS也是在网上找的所以有更先进的需求的话我肯定不能满足你们了不好意思效果图在10楼有人上了我这边不管怎么弄上传图片都卡在96% 而且不翻wall ...
css滚动条样式自定义
很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
CSS滚动条样式设置
webkit浏览器css设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
css修改滚动条默认样式
之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...
vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

随机推荐

MPLAB X IDE V4.15 创建工程，编译，问题处理
初步接触,有错误的地方还请大神们务必提出来,防止误导他人硬件环境:MCU--PIC18F67K22 仿真下载器--ICD 3 编译环境:MPLAB X IDE V4.15 中文版工作需要接触到了P ...
Eclipse中代码自动提示功能设置
Eclipse中代码自动提示功能设置 1 打开eclipse→Windows→Preferences→Java→Editor→Content Assist: 修改Auto Activation tri ...
maven +bootstrap+ssm
http://blog.csdn.net/yangwenxue_admin/article/details/71757505
Mybatis的针对于同一个有自己父类或子类的递归查询（如商品分类）
1.pojo代码 private Integer categoryId; private Integer superId; private String name; private Byte leve ...
JavaScript日历（es5版本）
近期在知乎上看到这么一个帖子,题主说自己JavaScript都学完了,结果老师留的作业还是不会写,就是写一个日历的插件,结果楼下一堆大牛出现了,百度的阿里的纷纷站出来发表自己的看法,有人认为简单,有人 ...
usb协议栈学习笔记
1.usb 集线器为什么一般都是只有4个扩展口? PC的根集线器可为每个A型连接器提供5V.500mA电源.一个总线供电的外部集线器可为每个端口提供100mA电流.由于USB为为外部集线器电路分配10 ...
微信js sdk的使用初步理解
第一步引入js文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js 备注:支持使用 AMD/C ...
python基本数据类型之列表和元组
python基本数据类型之列表与元组 python中list与tuple都是可以遍历类型.不同的是,list是可以修改的,而元组属于不可变类型,不能修改. 列表和元组中的元素可以是任意类型,并且同一个 ...
Python开发——4.集合和字符串拼接
一.集合(set) 1.集合的特性: 不同元素组成.元素是无序排列的可hash值 2.集合转为列表 s1 = {11,"hechouzi",(11,22,33)} names = ...
A1280. 最长双回文串
学习了回文树,地址:http://blog.csdn.net/u013368721/article/details/42100363: 这个题就是正这反着加一遍就好,一开始我想的是枚举每个位置,然后一 ...

如何自定义CSS滚动条的样式？