自定义滚动条实现

此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:

滚动条组成部分

1. ::-webkit-scrollbar 滚动条整体部分

2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)

3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。

5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

6. ::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方

7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

滚动条组成结构图如下:

其他设置项:

:horizontal  
//horizontal伪类适用于任何水平方向上的滚动条  
  
:vertical  
//vertical伪类适用于任何垂直方向的滚动条  
  
:decrement  
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
  
:increment  
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
  
:start  
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面  
  
:end  
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面  
  
:double-button  
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  
:single-button  
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  
:no-button  
no-button伪类表示轨道结束的位置没有按钮。  
  
:corner-present  
//corner-present伪类表示滚动条的角落是否存在。  
  
:window-inactive  
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
  
::-webkit-scrollbar-track-piece:start {  
/*滚动条上半边或左半边*/  
}  
  
::-webkit-scrollbar-thumb:window-inactive {  
/*当焦点不在当前区域滑块的状态*/  
}  
  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/*当鼠标在水平滚动条下面的按钮上的状态*/  
}

实例:

Html

1 <div class="test test-1">
2 <div class="scrollbar"></div>
3 </div>

Css

 1 .test{
2
3 width: 50px;
4
5 height: 200px;
6
7 overflow: auto;
8
9 float: left;
10
11 margin: 5px;
12
13 border: none;
14
15 }
16
17 .scrollbar{
18
19 width: 30px;
20
21 height: 300px;
22
23 margin: 0 auto;
24
25
26
27 }
28
29 .test-1::-webkit-scrollbar {/*滚动条整体样式*/
30
31 width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
32
33 height: 1px;
34
35 }
36
37 .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
38
39 border-radius: 10px;
40
41 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
42
43 background: #535353;
44
45 }
46
47 .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
48
49 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
50
51 border-radius: 10px;
52
53 background: #EDEDED;
54
55 }

效果如下如:

注意只在chrome下有效!

::-webkit-scrollbar{}这种写法改变的是全局的滚动条。

CSS3自定义滚动条样式-webkit内核的更多相关文章

  1. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  2. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  3. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  4. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  6. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  7. css3 自定义滚动条样式

    ::-webkit-scrollbar :滚动条整体部分 ::-webkit-scrollbar-thumb :滚动条里面的小方块样式 ::-webkit-scrollbar-track 滚动条的轨道 ...

  8. CSS3自定义滚动条样式方法

    该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...

  9. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

随机推荐

  1. PathCopyCopy一键复制文件路径

    1.简介 PathCopyCopy一键复制文件/文件夹名称和路径, 右键文件或者文件夹,可以复制名称,路径和父目录等. 2.推荐理由 当我们想拷贝文件名或者文件路径时,简直是神器啊,实测真的好用. 还 ...

  2. 【JAVA今法修真】 第八章 仙道万维网 圣地元宇宙

    您好,我是南橘,万法仙门的掌门,刚刚从九州世界穿越到地球,因为时空乱流的影响导致我的法力全失,现在不得不通过这个平台向广大修真天才们借去力量.你们的每一个点赞,每一个关注都是让我回到九州世界的助力,兄 ...

  3. 【17MKH】我在框架中对.Net依赖注入的扩展

    说明 依赖注入(DI)是控制反转(IoC)的一种技术实现,它应该算是.Net中最核心,也是最基本的一个功能.但是官方只是实现了基本的功能和扩展方法,而我呢,在自己的框架 https://github. ...

  4. .NET 云原生架构师训练营(组合模式)--学习笔记

    目录 引入 组合模式 源码 引入 在上一篇执行 _connectionDelegate 之后,HttpConnectionMiddleware 处理请求 return connection.Proce ...

  5. ES6解构与默认值的结合使用

    在读源码框架时遇到方法中有这样的形参:{ message = 'ok' } = {} 有点懵为什么已经赋值了还又赋了一个空对象 随后我去看了阮一峰老师的 ECMAScript 6 入门才明白.这是参数 ...

  6. 日志通过脚本导入到HDFS当中

    可以关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新) 利用shell脚本定时备份日志数据到HDFS上(适合日志数据比较少的时候) 时间命令 d ...

  7. 一文搞懂Flink Window机制

    Windows是处理无线数据流的核心,它将流分割成有限大小的桶(buckets),并在其上执行各种计算. 窗口化的Flink程序的结构通常如下,有分组流(keyed streams)和无分组流(non ...

  8. Android官方文档翻译 三 1.1Creating an Android Project

    Creating an Android Project 创建一个Android项目 An Android project contains all the files that comprise th ...

  9. golang中的rpc开发

    golang中实现RPC非常简单,官方提供了封装好的库,还有一些第三方的库 golang官方的net/rpc库使用encoding/gob进行编解码,支持tcp和http数据传输方式,由于其他语言不支 ...

  10. golang中的标准库反射

    反射 反射是指程序在运行期对程序本身访问和修改的能力 变量的内在机制 变量包含类型信息和值信息 var arr [10]int arr[0] = 10 类型信息:是静态的元信息,是预先定义好的 值信息 ...