关于滚动条样式
美化滚动条样式,主要涉及以下几个伪元素属性(注,这里以chrome浏览器作示例)
::-webkit-scrollbar
用于设置滚动条的整体样式
在这里设置宽高,以控制滚动条尺寸,且必须要设置宽高,否则不生效
宽高分别对应 y轴 和 x轴 的滚动条尺寸
若宽高为0,则可隐藏滚动条,但仍可保持滚动
::-webkit-scrollbar-track
滚动条轨道
不设置则不出现轨道
::-webkit-scrollbar-track-piece
没有滑块的滚动条轨道,或者说是内层轨道
同滚动条轨道
::-webkit-scrollbar-thumb
滚动条滑块,即滚动条滚动的部分
必须要设置,否则不会出现滑块
::-webkit-scrollbar-button
滚动条两端的箭头按钮
不设置则不出现
::-webkit-scrollbar-corner
X轴滚动条和Y轴滚动条的交接处
不设置,默认为白色小方块,宽高随X轴和Y轴滚动条尺寸
/* 滚动条所在容器 */ .scroll-container { margin: 10px; width: 500px; height: 150px; overflow: overlay; background-color: #eee; white-space: nowrap; } /* 滚动条整体 */ .scroll-container::-webkit-scrollbar { height: 20px; width: 20; } /* 两个滚动条交接处 -- x轴和y轴 */ .scroll-container::-webkit-scrollbar-corner { background-color: transparent; } /* 滚动条滑块 */ .scroll-container::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } /* 滚动条轨道 */ .scroll-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #ededed; } /* 滚动条两端按钮 */ .scroll-container::-webkit-scrollbar-button { }
分别设置水平和垂直方向上的滚动条
:horizontal
:适用于任何水平方向上的滚动条
:vertical
:适用于任何垂直方向的滚动条
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #eee; // 添加 horizonal ,单独设置水平方向上的 轨道 &:horizontal { background-color: blue; } } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; // 添加 vertical ,单独设置垂直方向上的 滑块 &:vertical { background-color: red; } }
本文参照
作者:Composition
链接:https://juejin.cn/post/6997011443967066143
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2013-07-04 用C#读取图片的EXIF信息的方法