.list-scroll {
/* 设置最小高度、宽度 */
min-height: 100px;
max-height: 500px;
/* 设置最大高度、宽度 */
min-width: 100px;
min-width: 500px;
/* 超出部分滚动条展示(自适应) */
overflow-y: auto;
}
/* ········· ········· 设置滚动条的样式 ········· ········· */
.list-scroll::-webkit-scrollbar {
/* 滚动条整体样式 */
/* 高宽分别对应横竖滚动条的尺寸 */
/* 宽度 */
width: 6px;
/* 高度 */
height: 0;
}
.list-scroll::-webkit-scrollbar-thumb {
/* 滚动条里面小方块 */
/* 圆角 */
border-radius: 3px;
/*内投影*/
/* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */
/* 背景色 */
background: #d1d4db;
}
.list-scroll::-webkit-scrollbar-thumb:hover {
/* 滚动条里面小方块 鼠标悬浮样式 */
/* 背景色 */
background: #e2e5ee;
}
.list-scroll::-webkit-scrollbar-track {
/* 滚动条里的轨道 */
/* 圆角 */
border-radius: 3px;
/*内投影*/
/* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); */
/* 背景色 */
background: rgb(246, 246, 246);
}
CSS滚动条美化样式
于 2019-09-28 00:42:22 首次发布