在 CSS 中,可以设置滚动条的样式及位置。通常情况下,滚动条会随着页面内容的滚动而移动,但在某些情况下,可能需要固定滚动条的位置。那么,如何实现固定滚动条的位置呢?首先,需要了解如何设置滚动条的样式
/* 定义滚动条的样式 */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* 定义滚动条的轨道颜色 */ ::-webkit-scrollbar-track { background-color: #f1f1f1; } /* 定义滚动条的滑块颜色 */ ::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } /* 当滚动条处于鼠标悬停状态时,定义滚动条的滑块颜色 */ ::-webkit-scrollbar-thumb:hover { background-color: #555; }
/* 定义元素的样式 */ .element { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto; } /* 设置滚动条的样式 */ .element::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f1f1f1; } /* 悬停状态下的滑块颜色 */ .element::-webkit-scrollbar-thumb:hover { background-color: #555; }
粉丝
0
关注
0
收藏
0