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系列属性由七个不同的伪元素组成，它们共同构成一个完整的scrollbar UI元素:

> 处理了酒吧本身的背景。它通常被其他元素所覆盖

指定滚动条上的方向按钮

处理进度条下面的空白

是可拖动滚动元素（thumb）未覆盖的进度条的最顶层

处理可拖动滚动元素，该元素根据可滚动元素的大小调整大小

处理可滚动元素的（通常）底角，两个滚动条可能在此相遇

处理出现在某些元素底角的滚动栏角上方的可拖动大小调整句柄

支持的浏览器。

您可以定义一个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