自定义scroll滚动条样式
一般chrome浏览器自带scroll:
添加scroll style
/* 整个滚动条 */
::-webkit-scrollbar {
width: 6px;
background-color: #ffffff;
display: none;
}
/* 鼠标指针浮动显示 */
:hover::-webkit-scrollbar{
display:block;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
/* 阴影 */
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
}
/* 滚定条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 30px;
background-color: #615b5b49;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
关于scroll:
CSS滚动条选择器
你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:
::-webkit-scrollbar
— 整个滚动条.::-webkit-scrollbar-button
— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb
— 滚动条上的滚动滑块.::-webkit-scrollbar-track
— 滚动条轨道.::-webkit-scrollbar-track-piece
— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner
— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer
— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
语法
::-webkit-scrollbar { styles here }
链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
更多scroll style:
原文 https://www.cnblogs.com/amylis_chen/p/11995324.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步