浏览器滚动条css样式设置,看这一篇文章就够了!
一 前言
在CSS 中,如果我们在块级容器上设置了属性:
overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll /*只是y方向*/
当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围。
有时候我们需要自定义滚动条的样式,比如一开始就它显示,比如想改变滚动条的颜色,设置轨道的样式等,那么这篇文章就是为你准备的。
二 正文
1.认识滚动条
设置scrollbar的为CSS伪元素,对应上图的数字:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
属性介绍:
::-webkit-scrollbar //滚动条整体部分
::-webkit-scrollbar-button //滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece //内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner //边角
::-webkit-resizer ///定义右下角拖动块的样式
2.设置样式
demo地址
进入页面,打开控制台工具,选中其中一个样式,就能看到该样式的CSS源码。
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-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;
}
在这里插入图片描述
任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。
:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。
用法举例:
::-webkit-scrollbar-track-piece:start {/* Select the top half (or left half) or scrollbar track individually */
}::-webkit-scrollbar-thumb:window-inactive {/* Select the thumb when the browser window isn't in focus */
}::-webkit-scrollbar-button:horizontal:decrement:hover {/* Select the down or left scroll button when it's being hovered by the mouse */
}
3.IE浏览器
兼容IE的参考链接
2 例子
// 滚动条宽度
div::-webkit-scrollbar {width: 6px;
}
// 滚动条轨道
div::-webkit-scrollbar-track {background: rgb(239, 239, 239);border-radius: 2px;
}
// 小滑块
div::-webkit-scrollbar-thumb {background: #40a0ff49;border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {background: #40a0ff;
}
效果
浏览器滚动条css样式设置,看这一篇文章就够了!相关推荐
- js层级选择框样式_IOS和JS的交互,看这一篇文章就够了
IOS和JS的交互,看这一篇文章就够了 创作不易,请珍惜,之后会持续更新,不断完善 Demo地址 目录 WKWebView使用.JS的交互 WKWebView使用.JS的交互 演示(本来想贴张GIF作 ...
- 关于VR产品的前世今生,看这一篇文章就够了
关于VR产品的前世今生,看这一篇文章就够了(转) 文/胡勇 即使最富质疑精神最冷静的人也无法漠视现在的 VR/AR 掀起的狂潮,这个从科技圈蔓延到实业界最后席卷大众的想象力的狂欢正以前所未有的态势改变 ...
- 五年程序员是如何玩转闲鱼无货源的,只看这一篇文章就够了
今天的内容方向主要是基础篇-进阶篇 ,优化了一下操作方法,尽量细化,让你看完这篇内容之后从入门到大神. 基础篇: 注册这些基础的之前说过,这次就不说了,这次说下如何养号. 完善个人资料(头像.昵称.简 ...
- IE11浏览器滚动条CSS样式
下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若有更好的方案,你可以留言,让大家都开开眼界...... /* 滑动条的颜色 */ scrollbar-face-color:# ...
- 动态规划——01背包问题 看此一篇文章就够了
本文讲述经典算法--动态规划的 常见问题 01背包 一篇文章带你学会01背包问题,妈妈再也不担心我遇到01背包了!!! 问题描述 有n个物品,它们有各自的体积和价值,现有给定容量m的背包,如何让背包 ...
- 产品经理如何进行数据分析?看这一篇文章就够了
一.数据分析的层级 产品的数据分析经常会遇到这样的问题:只有数据,没有分析.仅仅是描述数据,告诉你产品发生了什么. 比如次日留存率只有5%,这个数据偏低,可以看出该功能的用户粘性不好. 然后呢?往往就 ...
- Tomcat-- 掌握汤姆猫,看这一篇文章就够了
文章目录 一.Tomcat是什么 二.Tomcat下载安装 三.Tomcat目录结构介绍 四.启动Tomcat 1.启动失败的原因 五.部署静态页面 1.静态页面是什么 2. 部署单个 HTML 3. ...
- 玩转树莓派,看这一篇文章就够了
树莓派是一款基于ARM架构的小型电脑,可以运行Linux等操作系统,被广泛应用于物联网.嵌入式系统等领域.本文将介绍如何玩转树莓派,让你快速上手并实现一些有趣的项目. 一.购买树莓派和配件 首先需要购 ...
- 如何进行云主机迁移?看这一篇文章就够了!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云计算产品团队发表于云+社区专栏 主机迁移概述 在云计算时代,不管是从IDC上云还是多云直接的迁移,都已经是常见的事宜.而在上云/ ...
最新文章
- js老生常谈之this,constructor ,prototype
- HDU 2066 一个人的旅行
- java面试难吗_面试两个月,整理了今年的最新java面试题,你看行吗?
- 三天竟然爆发两起大漏洞事件!我们来教你如何跳过以太坊的坑
- 1、虚拟机内存管理、运行时数据区、线程共享区、Java堆、新生代、老年代、Eden区域分配、方法区、线程独占区、虚拟机栈
- 读完这篇文章,就基本搞定了Redis数据库
- 2019蓝桥杯省赛---java---B---4(数的分解)
- sql注入语句示例大全_SQL Order By语句:示例语法
- inno setup 打包mysql_使用Inno Setup 打包jdk、mysql、tomcat、webapp等为一个exe安装包
- TP5.x——update更新成功但是返回是0
- 【Proteus仿真】220V转5V向单片机供电
- 整理一些js中常见的问题
- mui多层tab切换上拉加载的实现
- 1124 Raffle for Weibo Followers(20 分)
- Hive On Spark搭建报错:Failed to create Spark client for Spark session xx: ..TimeoutException
- phpmywind 子菜单调用
- sapi 实现语音朗读
- 角频率、圆周频率、归一化频率的区别
- JAVA SE 005——类型转换
- 2018-12-16【训练日记】
热门文章
- windows搭建ftp服务器、抓取虚拟机数据包、局域网流量监听
- matlab小信号分析,小信号分析法重点笔记.doc
- C学习笔记4——switch语句,循环语句
- 微信小程序scroll-view 横向拖拽scroll-left不起作用的情况
- 分享5款办公效率工具|让你早点下班
- linux酷炫界面ui框架,GuiLiteSamples
- CentOS 7.X 系统安装及优化
- JavaScript字符串匹配方法快速指南
- Meego Linux 联想Z370(蓝)官方报4999
- DNGuard HVM 2007 标准版正式发布