1

I am trying to hide scrollbar in my react app but not being able to achieve it. I tried using ::-webkit-scrollbar with width as 0 or display as none but not able to achieve the desired result.

Shankul Shukla
  • 449
  • 1
  • 5
  • 7
  • use `overflow:none` – לבני מלכה Jun 24 '21 at 07:06
  • What do you mean by `not being able to achieve it.`? Prevent it from scrolling or not showing it on screen? – Yaya Jun 24 '21 at 07:14
  • Does this answer your question? [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) – JW Geertsma Jun 24 '21 at 07:17
  • Does this answer your question? [hide scrollbar but keep scroll functionality in react.js](https://stackoverflow.com/questions/60329344/hide-scrollbar-but-keep-scroll-functionality-in-react-js) – Chukwuemeka Maduekwe Mar 06 '22 at 13:27

1 Answers1

3

This will work for all browsers. Here the container div is scrollable but the scrollbar is hidden what you are trying to acheive.

.container {
  height: 200px;
  width: 350px;
  background-color: #3c3c3c;
  overflow-y: auto;
  
  /* hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hide scrollbar for chrome, safari and opera */
.container::-webkit-scrollbar {
  display: none;
}

.container p {
  color: #fff;
  padding: 20px;
}
<div class="container">
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
</div>
Robin
  • 4,902
  • 2
  • 27
  • 43