All geek questions in one place

Styling scrollbar for Google Chrome browser

I am trying to share some knowledge by posting some css trick questions (and jquery tricks in other topics) and answer them.
Here I am dealing with scrollbar styles for the Chrome Chrome browser.

+4
source share
2 answers

Just add these CSS rules:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-resizer

Here is each rule: enter image description here

+5
source

Here is a simple example of custom scrollbar using css

 ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

Here is how it will look.

enter image description here

ref: https://css-tricks.com/custom-scrollbars-in-webkit/

0
source

Source: https://habr.com/ru/post/1489817/

More articles:


All Articles