Custom Scrollbar - C S S

  • Scroll-bar
      /* Changes all Scroll-bars */
      ::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
      }
      
      /* Changes body Scroll-bars */
      body::-webkit-scrollbar {
        width: 0.5rem;
      }
    
  • Scroll-bar Track
      ::-webkit-scrollbar-track {
        background: var(--dark2);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
      }
    
  • Scroll-bar Thumb
      ::-webkit-scrollbar-thumb {
        background: var(--light);
        border-radius: 2px;
        outline: 1px solid slategrey;
      }
    
      ::-webkit-scrollbar-thumb:hover {
        background: var(--light2);
      }
    
  • For Firefox
      @supports (scrollbar-color: red blue) {
        * {
          scrollbar-color: red blue;
          scrollbar-width: auto/none/thin;
        }
      }
    
Share: