资讯专栏INFORMATION COLUMN

滚动条样式修改快速查阅

laoLiueizo / 3102人阅读

摘要:作者心叶时间整体样式代码按钮滚动条按钮会稍微麻烦点,首先提供下面的选择器可以选中按钮样式代码然而,按钮其实一共有八个,可以借组下面的六个组合来进行更准确的选择,他们方便是和方便表示垂直还是水平按钮和方便表示是开始位置的还是

作者:心叶
时间:2018-05-26 21:50

-webkit-scrollbar 1.整体
::-webkit-scrollbar{

    /*样式代码*/
    
}
2.按钮

滚动条按钮会稍微麻烦点,首先提供下面的选择器可以选中按钮:

::-webkit-scrollbar-button{

    /*样式代码*/
    
}  

然而,按钮其实一共有八个,可以借组下面的六个组合来进行更准确的选择,他们方便是:

2.1 :vertical和:horizontal方便表示垂直还是水平按钮

2.2 :start和:end方便表示是开始位置的还是结束位置的按钮

2.3 :decrement和:increment方便表示点击是触发减小还是增加的按钮

举例子,比如现在要选择垂直方向,在开始位置,点击上滑的滚动条样式,设置为红色,代码如下:

::-webkit-scrollbar-button:vertical:start:decrement {

    background-color: red;
    
}

一般设置display: block;

3.滑块
::-webkit-scrollbar-thumb{

    /*样式代码*/
    
}

当然,你可以提供:horizontal和:vertical来进行更准确的选择

4.轨道
::-webkit-scrollbar-track {

     /*样式代码*/

}

当然,你可以提供:horizontal和:vertical来进行更准确的选择

5.边角

也就是两个滚动条的交汇处

::-webkit-scrollbar-corner{

    /*样式代码*/

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113374.html

相关文章

  • 浏览器元素尺寸与位置查询指南

    摘要:前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问 前言 这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

    lei___ 评论0 收藏0
  • JQuery快速使用之元素查找与操作

    摘要:作者心叶时间以下是快速使用的查阅手册,没有个人理解的地方还请原谅,毕竟初衷只是方便开发时忘了可以快速查阅。第六步以及以及,拥有回调函数。回调函数有两个参数被选元素列表中当前元素的下标,以及原始旧的值。 作者:心叶时间:2018-04-22 00:41 以下是Jquery快速使用的查阅手册,没有个人理解的地方还请原谅,毕竟初衷只是方便开发时忘了可以快速查阅。 第一步:sizzle选择器 ...

    OBKoro1 评论0 收藏0
  • Vue 实现的音乐项目 music app 知识点总结分享

    摘要:后两个属性可选。属性定义了项目的缩小比例,默认为,即如果空间不足,该项目将缩小。属性定义了在分配多余空间之前,项目占据的主轴空间。它的默认值为,即项目的本来大小。结合的异步组件和的代码分割功能,轻松实现路由组件的懒加载。 项目总结 这是我第二个用 Vue 实现的项目,下面内容包括了在实现过程中所记录的知识点以及一些小技巧 项目演示地址:https://music-vue.n-y.io源...

    meteor199 评论0 收藏0
  • 移动端模拟滚动

    摘要:背景由于移动端原生滚动的局限性以及兼容性,部分特定场景的需求无法满足。示例模拟滚动知识点通过移动端的系列事件触发模拟滚动,获取手指滑动的偏移量,进而改变来进行位置偏移。 背景 由于移动端原生滚动的局限性以及兼容性,部分特定场景的需求无法满足。例如,笔者最近就接了一个需求:整个页面分为三块,每块内容的高度不等(但都超过一屏),要求滚动到内容的临界点有一个停顿的效果,下拉可以看到下一块的部...

    douzifly 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<