是否有全局样式滚动条的解决方案？

Question

我发现 the article 关于 Vue 和 Vuetify 的滚动条样式，其中说：“这个解决方案有一个缺点。我们不能将样式全局应用于所有组件。”

我想知道是否有解决方案可以全局设置所有滚动条的样式？

Answer 1

您可以定义一个 global.css/global.scss 文件，您可以在其中指定以下样式

/* Scroll bar stylings */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--lightestgrey); 
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

并使用

将其导入您的 main.js 文件中

import '../styles/global.css' // specify the path depending on your file structure

Answer 2

Safari/Chrome 世界的样式滚动条暴露在 -webkit 供应商前缀后面。

你可以在你的头文件中分配这个，包含在 & 中的所有文件中

body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

-webkit-scrollbar 属性系列由七个不同的伪元素组成，它们共同构成一个完整的滚动条 UI 元素：

1. ::-webkit-scrollbar 处理栏本身的背景。它通常被其他元素覆盖

2. ::-webkit-scrollbar-button 指向滚动条上的方向按钮

3. ::-webkit-scrollbar-track 处理进度条“下方”的空白区域

4. ::-webkit-scrollbar-track-piece是进度条最顶层未被可拖动滚动元素（拇指）覆盖

5. ::-webkit-scrollbar-thumb 解决了根据可滚动元素的大小调整大小的可拖动滚动元素

6. ::-webkit-scrollbar-corner 指向可滚动元素的（通常）底角，两个滚动条可能会在此相遇

7. ::-webkit-resizer 解决了出现在某些元素底角的滚动条角上方的可拖动大小调整句柄

支持的浏览器。