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:# ...
随机推荐
- linux安装mongodb磁盘空间不足
Insufficient free space for journal filesPlease make at least 3379MB available in /export/servers/mo ...
- IDEA修改代码后不用重新启动项目即可刷新
1.File--Settings--Build 2.Build,Execution,Deplyment--Compiler 3.选中打勾 "Build project automatical ...
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- webpack 4.0 配置方法以及错误解决
选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...
- JAVASE for 笔记
//0到100中奇数偶数的和package com.huang.boke.flowPath;public class Fordeme { public static void main(String[ ...
- shiro之第一个程序认证
有关shiro的介绍请访问https://blog.csdn.net/Kevinnsm/article/details/111823268 三个核心组件:Subject, SecurityManage ...
- IETF 官网
IETF 官网 https://www.ietf.org/ IETF数据追踪网站: https://datatracker.ietf.org/
- Java的虚拟线程(协程)特性开启预览阶段,多线程开发的难度将大大降低
高并发.多线程一直是Java编程中的难点,也是面试题中的要点.Java开发者也一直在尝试使用多线程来解决应用服务器的并发问题.但是多线程并不容易,为此一个新的技术出现了,这就是虚拟线程. 传统多线程的 ...
- kali下安装docker
前期准备 物理机:win10 虚拟机:kali 2021 网络连接方式:桥接 一.简介 Vulhub: 是一个面向大众的开源漏洞靶场,无需docker知识,简单执行两条命令即可编译.运行一个完整的漏洞 ...
- 新手小白入门C语言第二章:基本语法
1. 语句 C 语言的代码由一行行语句(statement)组成.语句就是程序执行的一个操作命令.C 语言规定,语句必须使用分号结尾,除非有明确规定可以不写分号. 如: int x = 1; 这就是一 ...