web前端入门到实战：CSS设置滚动条样式 |
您所在的位置：网站首页 › 2022抖音最火钢琴曲谱子 › web前端入门到实战：CSS设置滚动条样式 |
web前端入门到实战：CSS设置滚动条样式
|
webkit滚动条样式重置
1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。 2、scrollbar corner为横向和竖向的交叉角区域 3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件 组成结构图如下： 一旦发现滚动条的自定义样式，浏览器的默认样式设置将会失效，只使用在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 这些伪类同样适用如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，我们的前端学习扣qun :767273102，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，网页制作，网站开发，web全栈开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系路线图】都有整理，分享给小伙伴：学习前端我们是认真的 IE滚动条样式重置IE中只能修改滚动条颜色 scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ scrollbar-track-color /*底层背景色*/ scrollbar-face-color /*滚动条前景色，对应thumb*/ scrollbar-shadow-color /*滚动条边线色,thubm的border*/ scrollbar-highlight-color /*滚动条整体颜色*/ scrollbar-base-color /* 滚动条基准颜色 */ |
【本文地址】
今日新闻 |
推荐新闻 |