DEV Community

loading...
Cover image for Create Custom Scrollbar

Create Custom Scrollbar

mycodemagic profile image MyCodeMagic ・1 min read

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)

pic
Editor guide
Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

nice tips, you can also use more advanced css3 effects too, and even @keyframe animations!

codepen.io/navdeep-sharma/pen/oPbeVL



html {
    scroll-behavior: smooth;
  }

#component.journalIntentions::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
    ;
  }

  #component.journalIntentions::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(20, 20, 20, 0.96);
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(10, 10, 10, 0.96);
  }

  #component.journalIntentions::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(30, 30, 30, 0.96);
    background-color: rgba(80, 80, 80, 0.96);
  }

  #component.journalIntentions::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 53, 201, 0.96);
    box-shadow: inset 0 0 8px rgba(25, 25, 25, 0.96);
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
mycodemagic profile image
Collapse
matiasgdev profile image
Matias Gabriel • Edited

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