如何使用 css 模块自定义 div 的滚动条？

Question

我正在尝试像这样自定义 div 组件的滚动条：

Home.js

import classes from "./Home.module.scss";
function Home() {
  return (
    <div className={classes.scroll}>
      <p>jasbdkajsdb</p>
      <p>jasbdkajsdb</p>
      <p>jasbdkajsdb</p>
      <p>jasbdkajsdb</p>
      <p>jasbdkajsdb</p>
    </div>
  );
}

Home.module.scss

.scroll {
  &:-webkit-scrollbar {
    width: 20px;
  }
  &:-webkit-scrollbar-thumb {
    background: red;
    border-radius: 25px;
  }

  &::-webkit-scrollbar-track {
    background-color: red;
  }
}

但是 css 不适用。如何自定义 div 的滚动条？

Answer 1

你的两个选择器上缺少一个冒号试试这个：

Home.module.scss

.scroll {
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 25px;
  }

  &::-webkit-scrollbar-track {
    background-color: red;
  }
}

See the full list of scrollbar pseudo-element selectors