Solution

To remove the vertical scrollbar in react js, use overflow-y: hidden; it will hide the vertical scrollbar where you have mentioned.

Note: The overflow-y: hidden; also removes the scrollbar’s functionality. It is not possible to scroll inside the page.

Snippet

In this snippet, we will see a sample of removing the vertical scrollbar in react js using css.

Remove the vertical scrollbar

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
}

Remove the vertical scrollbar and keep scrollable

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

/* For Firefox, IE and Edge */
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

Example

In this example, we will create a page with vertical scrollbar and then use overflow-y css to hide it with scrollable.

Let’s start coding…

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>{`Hide vertical scrollbar`}</h1>
      <p>
        {
          "To remove vertical scrollbar in react js, use `overflow-y: hidden;` it wll hide vertical scrollbar where you have mantioned."
        }
      </p>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  height: 2000px;
}

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

/* For Firefox, IE and Edge */
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

Output

Hide,vertical,scrollbar

codesandbox