使用CSS自定义横向和纵向滚动条样式，主要通过::-webkit-scrollbar及其相关伪元素实现，以下为具体方法及示例代码：
核心伪元素说明
::-webkit-scrollbar：定义整个滚动条的样式（如宽度）。
::-webkit-scrollbar-track：定义滚动条轨道（背景）的样式。
::-webkit-scrollbar-thumb：定义滚动条滑块（可拖动部分）的样式。
::-webkit-scrollbar-thumb:horizontal：专门定义横向滚动条滑块的样式。
注：此方法仅适用于WebKit内核浏览器（如Chrome、Safari、Edge新版本等）。
示例代码：纵向红色、横向蓝色滚动条
关键参数说明
宽度与高度：
width控制纵向滚动条的宽度。
height控制横向滚动条的高度（需在::-webkit-scrollbar中单独设置）。
颜色与视觉效果：
通过background-color修改滑块颜色。
添加border-radius可实现圆角效果。
轨道样式：
::-webkit-scrollbar-track可设置轨道背景色、边框等。
跨浏览器兼容性提示
Firefox：需使用scrollbar-width（控制宽度）和scrollbar-color（控制滑块与轨道颜色），但无法单独区分横向/纵向。示例：/* Firefox 通用样式 */html { scrollbar-width: thin; /* auto | thin | none */ scrollbar-color: #f00 #fff; /* 滑块颜色 轨道颜色 */}
IE/Edge旧版：支持部分私有属性（如-ms-overflow-style），但自定义程度较低。
建议：若需高度兼容，可结合JavaScript库（如perfect-scrollbar）实现跨浏览器效果。
完整代码示例（WebKit浏览器）
总结：通过WebKit的伪元素可精细控制滚动条样式，但需注意浏览器兼容性。如需更广泛的适配，建议结合CSS前缀或第三方库实现。
