CSS设置滚动条样式基础知识_样式小白基础

webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。2、scrollbar corner为横向和竖向的交叉角区域3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件组成结构图

CSS设置滚动条样式基础知识

webkit滚动条样式重置

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar corner为横向和竖向的交叉角区域
3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

CSS设置滚动条样式基础知识_样式小白基础

组成结构图如下:
CSS设置滚动条样式基础知识_样式小白基础

一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。

-webkit-scrollbar  /* 滚动条整体部分,重置时必须要设置 */
-webkit-scrollbar-button  /* 滚动条的轨道的两端按钮  */
-webkit-scrollbar-track /* 滚动条的轨道(包含thumb和trace-piece)*/
-webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/
-webkit-scrollbar-thumb  /*滚动条里面的小方块*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置):

  • :horizontal 水平方向的track、track-piect、thumb
  • :vertica 垂直方向的track、track-piect、thumb
  • :decrement 向上和向左按钮的button、向上或向左的track-piece
  • :increment 向下和向右按钮的button、向下和向右的track-piece
  • :start 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的前面
  • :end 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的后面
  • :double-button 适用于buttons和track pieces,轨道结束的位置是否是一对按钮
  • :single-button 适用于buttons和track pieces,轨道结束的位置是否是一个按钮
  • :no-button 适用于track pieces,轨道结束的位置没有按钮
  • :corner-present 适用于所有scrollbar,滚动条的角落是否存在
  • :window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候
  • :enabled, :disabled, :hover , :active 这些伪类同样适用

IE滚动条样式重置

IE中只能修改滚动条颜色

scrollbar-arrow-color:#f2f2f3;  /*上下箭头*/
scrollbar-track-color  /*底层背景色*/
scrollbar-face-color   /*滚动条前景色,对应thumb*/
scrollbar-shadow-color /*滚动条边线色,thubm的border*/
scrollbar-highlight-color  /*滚动条整体颜色*/
scrollbar-base-color /* 滚动条基准颜色 */
海计划公众号
(0)
上一篇 2020/03/23 18:38
下一篇 2020/03/23 18:38

您可能感兴趣的内容

  • Js中常见的几种循环遍历小白知识_遍历小白教程

    项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。一、for循环for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环。let arr = [1,2,3,4,5,6,7]
    f

    2020/03/26
  • 前端如何和设计师成为好朋友?基础指南_设计使用教程

    分享一些和设计师成为好朋友的个人经验,注意,这些经验技巧只适用于技术开发人员。1. 不要站在设计师的背后如果有事情找设计师商量,千万不要站在设计师的背后,因为会给人一种你即将要指点江山的感觉,会唤起设计师过往一些糟糕的不好的回忆。所以正确的做法是,搬个椅子,坐在设计师的旁边,记得把座椅高度调到最低,当然最好的办法是直接蹲在旁边与之进行交流,设计师一看你这么虔

    2020/04/03
  • js和css文件位置对页面性能有什么影响?入门基础_文件基础知识教程

    CSS和JS的位置会影响页面效率 –网页性能js脚本文件的位置js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。CSS文件的位置CSS 是页面渲染的关键因素之一,(当页面存

    2020/03/20
  • Flux小白教程_Facebook用户建立客户端Web应用的前端架构

    Flux使用攻略 官方网址:http://facebook.github.io/flux/ GitHub:https://github.com/facebook/flux 简介描述…

    2020/03/06
  • 如何正确学习web前端流程以及如何找工作基础入门_工作使用说明

    如何正确学习web前端流程以及如何找工作基础入门 我给你解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash…

    2020/03/20
  • jQuery-Autocomplete使用教程_一个简单的,容易的,可定制的自动完成功能插件

    jQuery-Autocomplete使用教程 官方网址:https://www.devbridge.com/sourcery/components/jquery-autocomp…

    2020/03/06
  • 米艺字攻略教程_免费艺术字体在线生成器

    米艺字攻略教程 官方网址:http://www.miyizi.com/ 简介描述:免费艺术字体在线生成器 一个在线艺术字工具网站,有趣的同时,还是比较实用的。选择某个你喜欢的字体后…

    2020/03/10
  • web的应用模式指南攻略_web菜鸟攻略

    在开发web应用中,有两种模式:1、前后端分离。2、前后端不分离。 一、前后端不分离在前后端不分离的应用模式中,前端页面看到的效果是有后端控制的,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高这种应用模式比较适合纯网页应用,但是当后端对接app时,app可能不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的

    2020/03/29
  • Js实现base64,file和blob相互转换菜鸟知识_类型菜鸟知识

    第一个:base64转为Blob
    function dataURLtoBlob(dataurl) {var arr = dataurl.split(‘,’), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);wh

    Web前端 2020/03/26
  • 写给工程师的十条精进原则菜鸟教程_工程师小白入门

    引言时间回到8年前,我人生中第一份实习的工作,是在某互联网公司的无线搜索部做一个C++工程师。当时的我可谓意气风发,想要大干一场,结果第一次上线就写了人生中第一个Casestudy。由于对部署环境的不了解,把svn库里的配置文件错误地发到线上,并且上完线就去吃晚饭了,等吃饭回来发现师傅在焦头烂额地回滚配置。那次故障造成了一个核心服务20分钟不可用,影响了几百

    2020/04/03
  • 元素显示隐藏的9种思路菜鸟知识_元素入门指南

    在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路 display对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline、inline-block等注意:如果要适用于任何元素需要提前储存元素的disp

    2020/03/21
  • js二叉树的遍历算法入门基础_算法入门基础知识

    二叉树的概念二叉树是非常重要的数据结构,其中一棵树最上面的点称为根节点,如果一个节点下面连接多个节点,那么该节点称为父节点,下面的节点称为子节点,二叉树的每一个节点最多有2个子节点,一个节点子节点的个数称为度,二叉树每个节点的度只能是0,1,2中的一个,度为0的节点称为叶节点。js二叉树的实现用JS实现二叉树数据结构, 完成遍历、查找最大/小值、查找特定值以

    2020/04/03
  • git冲突小白教程解决git代码提交冲突问题_git使用帮助

    一、树冲突文件名修改造成的冲突,称为树冲突。比如,A同事把文件改名为A.C,B同事把同一个文件改名为B.C,那么B同事将这两个commit合并时,会产生冲突。如果最终确定用B同事的文件名,那么解决办法如下:git rm A.C
    git rm origin-name.C
    git add B.C
    git commit如果最终确定用A同事的文件名,那么解决办法如下

    2020/04/03
  • 如何用apply实现一个bind?小白指南_apply入门基础教程

    面试题:如何用apply实现一个bind?bind说明bind函数在 ES5 才被加入,所以并不是所有浏览器都支持,IE8及以下的版本中不被支持,如果需要兼容可以使用 Polyfill 来实现。
    bind方法与call/apply最大的区别就是bind返回一个绑定上下文的函数,而call/apply是直接执行了函数,特性如下:可以指定this
    返回一个绑

    2020/03/20
  • 前端常用的js函数方法整理指南攻略_函数菜鸟教程下载

    1.判断js类型 js有自己判断方法 typeof 但是当他遇到引用类型的时候得到的结果往往不是我们想要的,例如typeof [] // object
    typeof null // object于是自定义判断类型就出现了// 自定义判断元素类型JS
    function toType(obj) {return Object.prototype

    2020/03/24
  • ES6-WeakSet数组结构的用法指南攻略_数据使用攻略

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型。特性:1.元素必须是对象。添加一个number类型的元素。const ws = new WeakSet()
    ws.add(1)结果是报类型错误。TypeError: Invalid value used in weak set添加一个对象。con

    2020/03/29