andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a3425696c38588e0f600dd68b5fcbc95dbf3676a
30-seconds-of-code/snippets/scrollbars-styling.md
Mattia Astorino a3425696c3 feat: Add scrollbars-styling
2018-02-28 20:02:06 +01:00

2.2 KiB
Raw Blame History

Scrollbars styling

Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.

HTML

<div class="custom-scroll">
  <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__scrollbars-styling { height: 100px; overflow: auto; } .snippet-demo__scrollbars-styling::-webkit-scrollbar { width: 8px; } .snippet-demo__scrollbars-styling::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } .snippet-demo__scrollbars-styling::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } </style>

Explanation

  1. ::-webkit-scrollbar target the whole scrollbar element.
  2. ::-webkit-scrollbar-track target only the scrollbar track.
  3. ::-webkit-scrollbar-thumb Allow you to target and style the scrollbar thumb.

There are many other pseudo elements that you can use to style scrollbars. More info about this on the WebKit Blog

Browser support

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