DEV Community

Cover image for Create Custom Scrollbar
MyCodeMagic
MyCodeMagic

Posted on

Create Custom Scrollbar

Set the SCROLLBAR width
Here is Code

::-webkit-scrollbar {
  width: 20px;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
Enter fullscreen mode Exit fullscreen mode



Set the SCROLLBAR track
Here is Code

::-webkit-scrollbar-track {
  background-color: #EDF2F4;
}
Enter fullscreen mode Exit fullscreen mode



Set the SCROLLBAR thumb
Here is Code

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background: #2B2D42;
  border-left: 3px solid #EDF2F4;
  border-right: 3px solid #EDF2F4;
}
Enter fullscreen mode Exit fullscreen mode

Now i am sure you can Create Successfully Am I Right ?



Thanks for watching guys also apply a custom scrollbar to your Website I hope you understand everything steps.
Also visit our website mycodemagic

Discussion (3)

Collapse
matiasgdev profile image
Matias Gabriel • Edited on

Pretty cool. This works on Google Chrome but in Firefox use the scrollbar-width & scrollbar-color properties :)

Collapse
mycodemagic profile image
MyCodeMagic Author

Sure 🙂