andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
6cbeabcb34d01210921eb4ced6b13476bf802c2c
30-seconds-of-code/snippets/custom-scrollbar.md

2.2 KiB
Raw Blame History

Custom scrollbar

Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.

HTML

<div class="custom-scrollbar">
  <p>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?</p>
</div>

CSS

::-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);
}

Demo

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?

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?

<style> .snippet-demo__custom-scrollbar { height: 100px; overflow: auto; } .snippet-demo__custom-scrollbar::-webkit-scrollbar { width: 8px; } .snippet-demo__custom-scrollbar::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } .snippet-demo__custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } </style>

Explanation

  1. ::-webkit-scrollbar targets the whole scrollbar element.
  2. ::-webkit-scrollbar-track targets only the scrollbar track.
  3. ::-webkit-scrollbar-thumb targets the scrollbar thumb.

There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the WebKit Blog

Browser support

⚠️ Scrollbar styling doesn't appear to be on any standards track.