Solution
To remove the horizontal scrollbar in react js, use overflow-x: hidden;
it will hide the horizontal scrollbar where you have mentioned.
Snippet
In this snippet, we will see a sample of removing the horizontal scrollbar in react js using css.
body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Example
In this example, we will create a page with a horizontal scrollbar and then use overflow-x
css to hide it.
Let’s start coding…
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>{`Hide horizontal scrollbar`}</h1>
<p>
{
"To remove horizontal scrollbar in react js, use `overflow-x: hidden;` it wll hide horizontal scrollbar where you have mantioned."
}
</p>
</div>
);
}
styles.css
body {
overflow-x: hidden;
}
.App {
font-family: sans-serif;
width: 2000px;
}
Output
without-overflow
with-overflow