隐藏滚动条或更改滚动条样式
滚动条隐藏
/*chrome 和Safari*/
.scroll-container::-webkit-scrollbar {
display: none;
/* width: 0; */
}
.scroll-container {
-ms-overflow-style: none; /*IE 10+*/
scrollbar-width: none; /*firefox*/
}
更改滚动条样式
- ie、火狐不支持
.scroll-container {
width: 500px;
height: 150px;
border: 1px solid #ddd;
padding: 15px;
overflow: auto; /*必须*/
}
.scroll-container::-webkit-scrollbar {
width: 8px;
background: white;
}
.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track {
border-radius: 4px;
}
/* 滚动条轨道样式*/
.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-track {
background-color: rgba(180, 160, 120, 0.1);
box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
/* 滚动条手柄 */
.scroll-container::-webkit-scrollbar-thumb {
background-color: #00adb5;
}