自定义滚动条样式
默认滚动条样式如下↓
首先设置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);}
如果要修改滑块的样式 直接对颜色进行修改就好了
&表示盒子本身
