Hide scrollbar while maintaining functionality

[giraffekey]

It would be helpful to have a .no-scrollbar class that hides the scrollbar without removing its functionality, this is the code:

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

[arifikhsan]

nice to have this

[withewolf-dev]

How to Write inline style for the same for react

[andresgutgon]

Super nice! It solved my problem. Just one thing. If you're already using Tailwind which I guess here we all do xD

You can put in a TW layer

@layer utilities {
  @variants responsive {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  }
}

This way you can use with responsive classes like md:no-scrollbar

[lukewarlow]

Submitted a PR to add scrollbar-width utilities.

One such class is scrollbar-none which will work in Blink (Chrome, Edge etc), Firefox and WebKit (Safari).

Edit: Unfortunately this PR was rejected as the team want to take a proper look at all scrollbar styling possibilities to come up with the right API.

[3r8ydfow9fcdiujloj]

Bump

[C-o-d-e-C-o-w-b-o-y]

bump

[lukewarlow]

In case anyone comes across this discussion looking for a solution I've made an npm package with utility classes for scrollbar-width (among others) See https://github.com/lukewarlow/tailwind-scrollbar-utilities

This makes use of the legacy :-webkit-scrollbar CSS within the scrollbar-none class to improve browser support