在需要设置滚动的元素上设置如下
下面以垂直方向滚动为例,父元素为ul,需要先设置高度。
ul{
height: 260px;
overflow-y: scroll;
overflow-x: hidden;
}
ul::-webkit-scrollbar {
/* 隐藏默认的滚动条 */
-webkit-appearance: none;
}
ul::-webkit-scrollbar:vertical {
/* 设置垂直滚动条宽度 */
width: 2px;
}
/* 这里不需要用到这个 */
ul::-webkit-scrollbar:horizontal{
/* 设置水平滚动条厚度 */
height: 2px;
}
ul::-webkit-scrollbar-thumb {
/* 滚动条的其他样式定制,注意,这个一定也要定制,否则就是一个透明的滚动条 */
border-radius: 8px;
border: 2px solid rgba(255,255,255,.4);
background-color: rgba(0, 0, 0, .5);
}