CODEWITHSUNDEEP
javascriptcssreactjs
Shankul Shukla
Shankul Shukla

Reputation: 459

How to hide scroll bar in react app with allowing scrolling

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.

Upvotes: 1

Views: 24060

Answers (1)

Robin
Robin

Reputation: 5427

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>

Upvotes: 6

Related Questions