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

Without, overflow

with-overflow

with, overflow

codesandbox