DEV Community

Discussion on: Create Custom Scrollbar

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
MyCodeMagic Author

Sure 🙂