如何在Svelte中自定义修改默认滚动条的样式

问题核心原因 #

1. 你现有CSS代码里::-webkit-scrollbar-thumb错误使用了color属性，滚动条滑块颜色需要用background/background-color属性设置
2. Svelte组件内的<style>标签默认开启样式作用域，会给所有选择器添加Svelte生成的专属属性前缀，::-webkit-scrollbar这类浏览器伪元素不会带有对应属性，因此样式无法命中
3. 若你没有给main元素显式设置overflow-y: auto/overflow-y: scroll属性，滚动条实际会挂载在html/body元素上，针对main的选择器自然不会生效

解决方案 #

情况1：修改整个页面的全局滚动条样式

直接在全局样式文件（如global.css）中添加如下代码，或在任意组件的<style>标签内用:global()包裹选择器即可：

/* 适配Webkit内核浏览器（Chrome、Edge、Safari等） */
:global(::webkit-scrollbar) {
    width: 0.25rem;
}

:global(::webkit-scrollbar-track) {
    background: #1e1e24;
}

:global(::webkit-scrollbar-thumb) {
    background: #93CAED;
}

/* 适配Firefox浏览器 */
:global(body) {
    scrollbar-width: thin;
    scrollbar-color: #93CAED #1e1e24;
}

情况2：仅修改main容器的滚动条样式

首先确保你给main元素设置了溢出滚动属性，再添加如下样式即可：

main {
    overflow-y: auto;
    /* Firefox兼容配置 */
    scrollbar-width: thin;
    scrollbar-color: #93CAED #1e1e24;
}

/* Webkit内核浏览器适配 */
main:global(::-webkit-scrollbar) {
    width: 0.25rem;
}

main:global(::-webkit-scrollbar-track) {
    background: #1e1e24;
}

main:global(::-webkit-scrollbar-thumb) {
    background: #93CAED;
}

内容的提问来源于stack exchange，提问作者pbhak