CSS scrollbars styling

Tạo kiểu thanh cuộn thực tế

Ví dụ dưới đây định nghĩa một thanh cuộn mỏng với thumb màu đỏ và track màu cam. Để nhìn thấy thumb, bạn cần cuộn nội dung văn bản. Sau khi thanh cuộn hiển thị, hãy di chuột qua nó để xem track.

.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>

Note: Khi tùy chỉnh thanh cuộn, hãy đảm bảo rằng thumb và track có đủ độ tương phản so với nền xung quanh. Đồng thời đảm bảo vùng nhấn của thanh cuộn đủ lớn cho những người dùng thao tác bằng cảm ứng.