CSS 滚动条样式修改教程:自定义滚动条外观
/deep/ ::-webkit-scrollbar {/*滚动条整体样式*/\n\twidth: 20px !important;\n\t// height: 20px !important;\n\toverflow: auto !important;\n\tbackground: #00aa7f !important;\n\t-webkit-appearance: auto !important;\n\tborder-radius: 10px !important;\n\tdisplay: block;\n}\n\n/deep/ ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/\n\theight: 20px !important;\n\tborder-radius: 5px !important;\n\tbox-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;\n\t// background: #ff5500 !important;\n\tbackground-image: url("/static/image/novelDetail/icon_mouseblack.png") !important;\n\tbackground-repeat: no-repeat !important;\n\tbackground-size: 100% 100% !important;\n}\n\n/deep/ ::-webkit-scrollbar-track {/*滚动条里面轨道*/\n\t// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;\n\tborder-radius: 5px !important;\n\tbackground: #fff !important;\n}\n这段代码是用来修改滚动条样式的。具体修改方法如下:\n\n1. ::-webkit-scrollbar 是用来修改整个滚动条的样式,比如宽度、高度、背景色等。\n2. ::-webkit-scrollbar-thumb 是用来修改滚动条的滑块样式,比如高度、圆角、阴影、背景图等。\n3. ::-webkit-scrollbar-track 是用来修改滚动条的轨道样式,比如阴影、圆角、背景色等。\n\n在上述代码中,使用了 /deep/ 来穿透组件样式,以便修改滚动条样式。具体修改的样式属性和值可以根据需求进行调整。\n\n注意,这段代码是针对使用WebKit内核的浏览器有效,比如Chrome、Safari等。不同浏览器可能需要使用不同的前缀来修改滚动条样式。
原文地址: https://www.cveoy.top/t/topic/pxoi 著作权归作者所有。请勿转载和采集!