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

Question

我找到了这篇文章，其中写道：“此解决方案有一个缺点。我们不能\xe2\x80\x99t 对所有组件全局应用该样式。”

\n

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

\n

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