::-webkit-scrollbar {/*隐藏滚轮*/

display: none;

}

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

前言

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

演示

来看看这2个滚动条demo:demo1(图片版)demo2(纯CSS3版)

滚动条组成

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

简洁版

这里就不贴出详细代码了,demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

详细设置

定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
: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 {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

移动端隐藏scroll滚动条::-webkit-scrollbar的更多相关文章

  1. 移动端隐藏滚动条,css方法

    小白第一次发文记录自己遇到的问题. 关于隐藏移动端滚动条方法很多,这里只说本人用到的. 在PC端隐藏html右侧默认滚动条 html { /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-ove ...

  2. jquery scroll()滚动条事件

    最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...

  3. 使用CSS隐藏元素滚动条

    如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置overflow:hidden ...

  4. scroll滚动条掩藏

    掩藏scroll滚动条::-webkit-scrollbar ::-webkit-scrollbar {} /* 1 */ ::-webkit-scrollbar-button {} /* 2 */ ...

  5. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局(转载)

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  6. overflow:scroll 滚动条不显示

    overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大

  7. 谷歌 滚动条样式 scrollbar

    谷歌  滚动条样式 scrollbar main.less :: 是css3 最新的伪类 /*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; height: ...

  8. 隐藏jqgrid滚动条

    .ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; } /* 隐藏jqgrid滚动条 */

  9. 移动端添加横向滚动条&隐藏

    添加横向滚动条ul { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }隐藏滚动条,保留滚动效果 ...

随机推荐

  1. swagger2 Could not resolve pointer: /definitions

    错误信息: Errors Resolver error at paths././query.post.parameters.20.schema.$ref Could not resolve refer ...

  2. STM32F10xxx_Keil中添加的预定义宏

    目录 STM32F10xxx_Keil中添加的预定义宏 更新记录 STM32F10xxx_Keil中添加的预定义宏 更新记录 version status description date autho ...

  3. java web浏览器访问工程前面添加一级目录学习笔记

    有的时候因为nginx和f5策略问题需要在访问系统的时候前面添加一个前缀以区分不通地方需要用同一个工程的情况: 举个例子:当访问localhost:8080/webDemo/demo/shafei.j ...

  4. centos7 修改时区,同步时间,Mysql修改时区

    查看时区 timedatectl status [root@localhost nova-back]# timedatectl status Local time: Thu 2019-05-23 15 ...

  5. 快速写个node命令行工具

    1.package.json-bin配置 [创建bat文件,把bat路径添加到PATH中]这些固定的工作可以由npm帮我们完成.package.json中有个bin字段配置: bin: { " ...

  6. 3.移动端自动化测试-appium环境搭建(原理)

    appium自动化原理: 需要服务端(appium启动),手机端(adb连接设备),脚本端(pycharm)就可以进行 自己总结下: 手机和脚本连接:1.adb连接,2靠脚本导入驱动. 脚本和服务端连 ...

  7. Python单元测试框架unittest重要属性 与 用例编写思路

    前言 本文为转载,原文地址作者列举python unittest这个测试框架的主要属性和 测试用例思路 unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行, ...

  8. Linux命令详解——vmstat

    Vmstat命令详解 一.前言 vmstat命令:  用来获得有关进程.虚存.页面交换空间及 CPU活动的信息.这些信息反映了系统的负载情况 二.虚拟内存运行原理 在系统中运行的每个进程都需要使用到内 ...

  9. mtd介绍

    转:http://blog.csdn.net/lwj103862095/article/details/21545791 MTD,Memory Technology Device即内存技术设备 字符设 ...

  10. mybatis 动态sql 的笔记 以及标签

    MyBatis常用OGNL表达式 e1 or e2 e1 and e2 e1 == e2,e1 eq e2 e1 != e2,e1 neq e2 e1 lt e2:小于 e1 lte e2:小于等于, ...