个人笔记003--css改变滚动条样式

原创于 2018-11-08 14:55:25 发布 · 231 阅读

CC 4.0 BY-SA版权

本文分享了一段CSS代码，用于自定义网页滚动条的样式，包括整体、轨道和拇指部分的样式调整。此代码适用于谷歌浏览器，可能部分浏览器不支持。

下午有时间就整理一下以前写过的一些东西，觉得这个css改变滚动条样式比较常用就顺手记录了下来

<style type="text/css">
			
			::-webkit-scrollbar {/*滚动条整体样式*/
				width: 14px;
				height: 14px;
			}
			
			::-webkit-scrollbar-track{/*滚动条里面小方块*/
				border-radius: 999px;
				border: 5px solid transparent;
				inset 1px 1px 5px rgba(0,0,0,0.2);
            	background: rgba(0,0,0,0.1);
			}
			::-webkit-scrollbar-thumb {/*滚动条里面轨道*/
				min-height: 20px;
				border-radius: 999px;
				border: 5px solid transparent;
				background: #aaa;
				background-clip: content-box;
				box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
			}
			::-webkit-scrollbar-corner {
				background: transparent;
			}
		</style>

把上面这段代码放到head里面就可以了(但是好像有一部分浏览器不支持，谷歌是肯定可以的，哈哈)