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