CSS设置滚动条样式或隐藏滚动条

想要添加滚动条，必须给盒子添加高度

例如 在x轴上隐藏内容，y轴上显示滚动条

.div {
    height: 300px
    overflow-x: hidden;
    overflow-y: auto;
}

基本设置

1. 可以滚动但是不让显示滚动条

.div::-webkit-scrollbar {
    		display: none;
		}

2.手动设置滚动条样式

/*滚动条区域的宽度 */
.div::-webkit-scrollbar {
    width:4px;
}
/* 滚动槽的样式设置 */
.div::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.5);
}
/* 滚动条滑块的样式设置 */
.div::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0 0 6px rgba(39,167,148);
}
.div::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
}