如果你在外部统一设置了
::-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
元素中单独开启滚动条的样式,而不受外部样式的影响。