CSS3:scrollbar样式设置
CSS3:scrollbar样式设置
1. 设置出现滚动条的方式
overflow:scroll --- x和y方向都会出现滚动条
或者
overflow-x:scroll --- 只有x方向出现滚动条
或者
overflow-y:scroll --- 只有y方向出现滚动条
当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围。有时候我们需要自定义滚动条的样式,比如一开始就让它显示,改变滚动条的颜色,设置轨道的样式等。
2.认识滚动条
::-webkit-scrollbar --- 滚动条整体部分
::-webkit-scrollbar-button --- 滚动条两端的按钮
::-webkit-scrollbar-track --- 外层轨道
::-webkit-scrollbar-track-piece --- 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-thumb --- 滚动条里面可以拖动的那个
::-webkit-scrollbar-corner --- 边角
::-webkit-resizer --- 定义右下角拖动块的样式
3.改变滚动条样式
使用方式:
点击查看代码
::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*对应竖滚动条的宽度*/
height : 8px; /*对应横滚动条的高度*/
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
/* border-radius: 6px; */
background-color: #9e9e9e;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
background: #ffffff;
/* border-radius: 6px; */
}
4.滚动条伪类
任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。
:vertical --- 适用于任何垂直方向的滚动条。
:no-button --- 表示轨道结束的位置没有按钮。
:horizontal --- 适用于任何水平方向上的滚动条。
:corner-present --- 表示滚动条的角落是否存在。
:decrement --- 适用于按钮和轨道碎片。表示递减的按钮或轨道碎片。
:increment --- 适用于按钮和轨道碎片。表示递增的按钮或轨道碎片。
:end --- 适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的后面。
:double-button --- 适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。
:single-button --- 适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。
:start --- 适用于按钮和轨道碎片。表示对象(按钮轨道碎片)是否放在滑块的前面。
:window-inactive --- 适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。
5.参考文章
css scrollbar样式设置:https://segmentfault.com/a/1190000012800450
CSS3:scrollbar样式设置的更多相关文章
- scrollbar样式设置
转载:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest author:specialCoder 一 前言 在CSS 中 ...
- css scrollbar样式设置
参考链接:https://segmentfault.com/a/1190000012800450
- placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- Android必知必会-自定义Scrollbar样式
如果移动端访问不佳,请使用–>GitHub版 背景 设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- placeholder样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
- CSS3布局样式
CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
随机推荐
- css使div居中
每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;
- 动态添加HTML时onclick函数参数传递
onclick函数动态传参 1.参数为数值类型时: var tmp = 123; var strHTML = "<div onclick=func(" + tmp + &qu ...
- 一像素边框的问题(使不同dpr设备完美显示1px的border)
问题:不同dpr的屏幕有不同的屋里像素值,而我们css像素的1px由于不同屏幕的渲染会导致宽度并不一样: 例如: dpr为2的retina屏幕是有四个物理像素点(真实屏幕上的点)组成一个逻辑(css) ...
- B03. BootstrapBlazor实战 10分钟编写数据库维护项目
demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为Ga ...
- JAVASE If 单选择、双选择及镶嵌笔记
//单选package com.huang.boke.flowPath;import java.util.Scanner;public class test02 { public static voi ...
- Spring Boot-自动配置之底层原理
一.SpringBoot启动的时候加载主配置类,开启了自动配置的功能 @SpringBootApplication public class SpringBoot02Application { pub ...
- redis迁移第三篇(cluster forget)
1.删除错误节点,带有 fail,noaddr , 这种需要用 cluster forget redis集群迁移之后,由于之前的误操作,导致pod日志里面出现这样的错误,出现一会好一会不好的情况,就是 ...
- 算法基础③--DFS解决迷宫问题入门
迷宫问题 通过深度优先搜索(DFS)方法实现. 迷宫问题一 一天蒜头君掉进了一个迷宫里面,蒜头君想逃出去,可怜的蒜头君连迷宫是否有能逃出去的路都不知道. 看在蒜头君这么可怜的份上,就请聪明的你告诉蒜头 ...
- Rancher无法登录 容器报错X509:certificate has expired or is not ye valid
在某天需要发布新版本的时候,发现rancher无法登录,于是到服务器上查看rancher日志,发现以下内容: 参考rancher文档中独立容器Rancher Server证书更新解决 1. 进入容器 ...
- Bootstrap Blazor 模板使用(一)Layout 组件
原文链接:https://www.cnblogs.com/ysmc/p/16197223.html BootstrapBlazor 官网地址:https://www.blazor.zone Boots ...