滚动条

1. ::-webkit-scrollbar 定位整个滚动条元素。
2. ::-webkit-scrollbar-track 仅针对滚动条轨道。
3. ::-webkit-scrollbar-thumb 瞄准滚动条拇指。 ```html

   Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

/ Document scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } / Scrollable element / .some-element::webkit-scrollbar { }

![image.png](https://cdn.nlark.com/yuque/0/2021/png/303665/1616933098451-6b61167d-7bbc-4145-9c6f-1ea2e69fa90f.png#crop=0&crop=0&crop=1&crop=1&height=112&id=rMtFw&margin=%5Bobject%20Object%5D&name=image.png&originHeight=223&originWidth=1135&originalType=binary&ratio=1&rotation=0&showTitle=false&size=27331&status=done&style=none&title=&width=567.5)
```less
.global-scrollbar-style() {
  &::-webkit-scrollbar {
    height: 7.25px;
    width: 7.25px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: rgba(144, 147, 153, 0.3);
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
  &::-webkit-scrollbar-track {
    opacity: 0;
  }
  //火狐
  scrollbar-width: thin;
  scrollbar-color: rgba(144, 147, 153);
}