当给一个容器设置height和overflow:auto之后,如果子元素的高度超出父容器height时,就会出现滚动条;
默认的滚动条的样式是这样的:
使用下面的代码可以修改滚动条的默认样式:
/* 修改滚动条的样式 */
::-webkit-scrollbar {
/* 设置滚动条的宽度:如果设置为0就是隐藏滚动条但是滚动效果还在非常完美 */
width: 4px !important;
}
/* 滚动条的轨道 */
::-webkit-scrollbar-track {
/* 设置滚动条轨道的背景色 */
background-color: #f1f1f1;
}
/* 滚动条的轨道的hover颜色 */
::-webkit-scrollbar-track:hover {
background-color: #eaeaea;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
/* 设置滚动条滑块的背景色 */
background-color: #888;
border-radius: 8px;
}
/* 鼠标悬停在滚动条上的样式 */
/* 设置鼠标悬停时滚动条滑块的背景色 */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 滚动条的滑块在非激活状态下的样式(滑块未被点击或拖动) */
::-webkit-scrollbar-thumb:inactive {
background-color: #ccc;
}
/* 滚动条的按钮(上下按钮) */
::-webkit-scrollbar-button {
display: none;
}
/* 滚动条的角落(轨道和滑块交汇的部分) */
::-webkit-scrollbar-corner {
background-color: #f1f1f1;
}