自定义CSS滚动条样式-优快云博客

本文链接：https://blog.youkuaiyun.com/bug_producter/article/details/114297119

css自定义滚动条样式

- 自定义滚动条实例代码：

有时候觉得浏览器自带的滚动条，实在是太丑了，一点点内容超出比例，就是多大的一个滚动条就来了，实在是遭不住，所以我就动手了！！！
下图是浏览器自带的滚动条：
在这里插入图片描述

自定义滚动条实例代码：

如有不足，还望指正

/*//内层滚动条凹槽的颜色，还可以设置边框属性 */
		::-webkit-scrollbar-track-piece {
			background-color:#f8f8f8;
		}

		/*//滚动条的的整体部分 */
		::-webkit-scrollbar {
			width: 4px;//纵向滚动跳的宽度
			height: 9px;//横向滚动条的高度
		}

		/*//滚动滑块的设置 */
		::-webkit-scrollbar-thumb {
			background-color: rgba(170, 175, 175, 0.69);//滚动条的颜色
			background-clip:padding-box;
			border-radius: 10px;//滚动条设置圆角
			min-height:28px;//最小高度
		}
		//鼠标放置在滚动滑块上改变，滚动滑块的颜色
		::-webkit-scrollbar-thumb:hover {
			background-color: rgba(32, 154, 255, 0.48);//鼠标放在滚动条上，滚动条改变颜色
		}