如何在 Svelte 中设置滚动条的样式？答案

【问题标题】：How do I style the scrollbar in Svelte?如何在 Svelte 中设置滚动条的样式？
【发布时间】：2021-10-16 21:11:59
【问题描述】：

我已经花了好几个小时试图弄清楚如何在 Svelte 中重新设置默认滚动条的样式。我尝试了常规的 HTML 样式、数十个外部 npm 包，以及我能找到的所有来源，但它们都不起作用。如何重新设置 Svelte 网站中默认滚动条的样式？

我尝试将以下代码添加到我的样式表中，但无济于事：

main::-webkit-scrollbar {
    width: 0.25rem
}

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

main::-webkit-scrollbar-thumb {
    color: #93CAED
}

【问题讨论】：

Svelte 不关心滚动条——这是一个依赖于浏览器的事情。只需在样式表中设置 CSS 规则：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
@Dai 这只是 Firefox。我的意思是一个适用于所有网络浏览器的解决方案。我尝试过的一个解决方案是webkit-scrollbar，但这似乎也不适用于 Svelte。
同样，Svelte 不关心滚动条 - 但是，scrollbar-width 和 scrollbar-color 仅适用于 Firefox（但它是基于标准的），对于 Chrome、Edge 和 Safari，您需要使用--webkit-scrollbar)。您尚未发布任何代码，因此我们无法真正帮助您提供具体信息。
@Dai 我已经用我用过的代码对其进行了编辑。
当您的main 样式规则未规定它是滚动容器时，为什么要将--webkit-scrollbar 样式应用于您的<main> 元素？您的根滚动容器是<html> 或<body>，因此您应该设置这些元素的样式。

标签： scroll scrollbar svelte

【解决方案1】：

事实证明 Dai（来自原始帖子的 cmets）是正确的。我不应该在我的<main> 元素上应用这些样式。但是，我没有太多选择，因为样式将应用于只有 3 个标签的 .svelte 文件 - <script、<style 和 <main>。幸运的是，我找到了解决方法。

通过在::webkit-scrollbar 前面加上:root，它会自动将提供的块中的样式应用于整个文档。

【讨论】：