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样式设置的更多相关文章

  1. scrollbar样式设置

    转载:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest author:specialCoder 一 前言 在CSS 中 ...

  2. css scrollbar样式设置

    参考链接:https://segmentfault.com/a/1190000012800450

  3. placeholder的样式设置

    在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

  4. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  5. Android必知必会-自定义Scrollbar样式

    如果移动端访问不佳,请使用–>GitHub版 背景 设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带 ...

  6. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  7. placeholder样式设置

    在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

  8. CSS3布局样式

    CSS3多列布局columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...

  9. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. linux安装mongodb磁盘空间不足

    Insufficient free space for journal filesPlease make at least 3379MB available in /export/servers/mo ...

  2. IDEA修改代码后不用重新启动项目即可刷新

    1.File--Settings--Build 2.Build,Execution,Deplyment--Compiler 3.选中打勾 "Build project automatical ...

  3. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  4. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...

  5. JAVASE for 笔记

    //0到100中奇数偶数的和package com.huang.boke.flowPath;public class Fordeme { public static void main(String[ ...

  6. shiro之第一个程序认证

    有关shiro的介绍请访问https://blog.csdn.net/Kevinnsm/article/details/111823268 三个核心组件:Subject, SecurityManage ...

  7. IETF 官网

    IETF 官网 https://www.ietf.org/ IETF数据追踪网站: https://datatracker.ietf.org/

  8. Java的虚拟线程(协程)特性开启预览阶段,多线程开发的难度将大大降低

    高并发.多线程一直是Java编程中的难点,也是面试题中的要点.Java开发者也一直在尝试使用多线程来解决应用服务器的并发问题.但是多线程并不容易,为此一个新的技术出现了,这就是虚拟线程. 传统多线程的 ...

  9. kali下安装docker

    前期准备 物理机:win10 虚拟机:kali 2021 网络连接方式:桥接 一.简介 Vulhub: 是一个面向大众的开源漏洞靶场,无需docker知识,简单执行两条命令即可编译.运行一个完整的漏洞 ...

  10. 新手小白入门C语言第二章:基本语法

    1. 语句 C 语言的代码由一行行语句(statement)组成.语句就是程序执行的一个操作命令.C 语言规定,语句必须使用分号结尾,除非有明确规定可以不写分号. 如: int x = 1; 这就是一 ...