CSS 滚动条样式

**CSS 滚动条样式**模块定义了一些属性，您可以使用这些属性来对滚动条进行视觉样式设置。您可以根据需要自定义滚动条的宽度。您还可以自定义滚动条**轨道**的颜色，它是滚动条的背景，以及滚动条**滑块**的颜色，它是滚动条的可拖动句柄。

滚动条样式实战

此示例定义了一个细滚动条，带有红色的滑块和橙色的轨道。要查看滑块，您需要滚动文本。滚动条可见后，将鼠标悬停在其上以查看轨道。

.poem {
  width: 300px;
  height: 100px;
  border: 1px solid;
}

css

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}

<blockquote class="poem">
  <h3>A Small Needful Fact</h3>
  <pre>
Is that Eric Garner worked
for some time for the Parks and Rec.
Horticultural Department, which means,
perhaps, that with his very large hands,
perhaps, in all likelihood,
he put gently into the earth
some plants which, most likely,
some of them, in all likelihood,
continue to grow, continue
to do what such plants do, like house
and feed small and necessary creatures,
like being pleasant to touch and smell,
like converting sunlight
into food, like making it easier
for us to breathe.
</pre
  >
  <p>
    - <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
  </p>
</blockquote>