【常用代码06】CSS自定义滚动条样式 overflow-y开启滚动条

自定义滚动条样式

默认滚动条样式如下↓

首先设置div盒子
然后给盒子开启滚动条 这样超出高度或者宽度的内容将会被隐藏
滚动就可以看到

// 开启y轴滚动条
overflow-y: auto;

修改后的样式

由滚动轨道和滑块组成

/* 定义滚动条样式 */
&::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background-color: rgba(240, 240, 240, 1);
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
		box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
		border-radius: 10px;
		background-color: rgba(240, 240, 240, .5);
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
		background-color: rgba(237, 44, 37, .5);
}

如果要修改滑块的样式 直接对颜色进行修改就好了
&表示盒子本身