如果你在外部统一设置了
::-webkit-scrollbar { display: none; }
来隐藏滚动条,但是想要在.lever
元素中单独开启滚动条的样式,你可以使用CSS的级联选择器来覆盖外部样式。以下是一个示例,展示如何给
.lever
单独开启滚动条的样式:
/* 外部样式统一隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}
/* 单独给 .lever 元素开启滚动条样式 */
.lever {
padding-top: 17px;
height: 290px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
.lever::-webkit-scrollbar {
display: initial;
width: 8px;
}
.lever::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.lever::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
.lever::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
在上述代码中,我们首先使用
::-webkit-scrollbar
选择器来隐藏滚动条。然后,在.lever
元素的样式中,我们使用scrollbar-width
和scrollbar-color
属性来设置滚动条的宽度和颜色。接下来,我们使用
.lever::-webkit-scrollbar
选择器来重新显示滚动条,并设置滚动条的样式。通过这种方式,你可以在
.lever
元素中单独开启滚动条的样式,而不受外部样式的影响。