css怎样修改默许滚动条样式
发布时间:09/01 来源:未知 浏览:
关键词:
前言:
许多项目都需要转变滚动条的默许样式,并不想独自下载和引入插件。
修改办法:(举荐教程:CSS入门教程)
&::-webkit-scrollbar { // 滚动条的配景 width: 16px; background: #191a37; height: 14px; } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { border-radius: 999px; width: 20px; border: 5px solid transparent; } &::-webkit-scrollbar-track { box-shadow: 1px 1px 5px #191a37 inset; } &::-webkit-scrollbar-thumb { //滚动条的滑块样式修改 width: 20px; min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px #464f70 inset; } &::-webkit-scrollbar-corner { background: #191a37; }
精简代码:
&::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } &:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); } &:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); }
这个的长处在于鼠标移上才会显示修改的滚动条。
隐蔽某轴的滚动条代码写法:
overflow-x:hidden;
相干视频教程分享:css视频教程
以上就是css怎样修改默许滚动条样式的细致内容,更多请关注 百分百源码网 其它相干文章!