要使用 CSS 设置垂直滚动提示条,需要使用属性 overflow 和 overflow-y。将 overflow-y 设置为 scroll,可以在元素中创建一个垂直滚动条。如果要自定义滚动条的样式,可以使用属性 scrollbar-width 和 scrollbar-color。例如,可以使用以下代码设置一个带有自定义滚动条的垂直滚动提示条:
.scroll-container {
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #999 #fff;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-track {
background: #fff;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 20px;
border: 3px solid #fff;
}
在这个例子中,.scroll-container 是要添加滚动条的元素的类名。scrollbar-width 属性设置滚动条的宽度为 thin,scrollbar-color 属性设置滚动条的颜色为 #999(滑块)和 #fff(轨道)。::-webkit-scrollbar 是 WebKit 浏览器引擎提供的一个伪元素,可以用来自定义滚动条样式。::-webkit-scrollbar-thumb 设置滑块的样式,包括背景颜色、圆角和边框。::-webkit-scrollbar-track 设置轨道的背景颜色。