How to remove horizontal scrollbar in React JS ?

In this post, we will learn how to remove the scroll bar in ReactJS. Before going to our topic. We must know what is scroll bar. A scroll bar is a graphical user interface( GUI) element in a computer window or application that allows users to navigate through a context that is larger than the visible area. It typically appears on the right and or bottom side of a window. In this post, we will see how to remove the bottom scroll bar using ReactJS.

Approach to remove the horizontal scrollbar in ReactJS:

• Adjust Content Width: Ensure that the width of the content within the scrollable area is equal to or less than the width specified for the scrollable container.
• Responsive Design: Implement responsive design techniques to dynamically adjust the content’s width based on the viewport size. This can involve using percentage values for widths or CSS media queries to apply different styles for various screen sizes.
• CSS Styling: Set the CSS overflow-x property of the scrollable area to “hidden” or “visible” instead of “auto“. This hides the horizontal scrollbar while still allowing horizontal scrolling if needed.

Steps to Create a React Application:

Step 1: Create a React application using the following command:

npx create-react-app my-react-app

Step 2: Navigate the Project Directory using the following command.

cd my-react-app

Example 1: Below is an example of the horizontal scrollbar in ReactJS.

CSS

*{
    margin:0 ;
    padding:0 ;
}

.app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .content {
    border: 2px solid #333;
    padding: 20px;
  }

Javascript

import './App.css';

function App() {
    return (
        <div className="app-container">
            <div className="content">

                <div style={{
                    width: '500px', height: '300px',
                    overflowX: 'auto', overflowY: 'auto'
                }}>

                    <div style={{
                        width: '1500px', height: '1200px',
                        background: 'lightblue'
                    }}>
                        <h1>Geeks for Geeks</h1>
                        <p style={{ color: 'red', marginTop: '20px' }}>
                            In this post, we will learn how
                            to remove the scroll bar in ReactJS.
                            Before going to our topic.
                            We must know what is scroll bar.
                            A scroll bar is a graphical
                            user interface( GUI) element
                            in a computer window or
                            application that allows users to
                            navigate through a context that
                            is larger than the visible area.
                            It typically appears on the right
                            and or bottom side of a window.
                            In this post, we will see how to
                            remove the bottom scroll bar using React JS.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

Start your application using the following command.

npm start

Output:

Output Wtihout Removing Scrollbar

Example 2: Below is an example of removing horizontal scrollbar in ReactJS.

CSS

* {
  margin: 0;
  padding: 0;
}

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  border: 2px solid #333;
  padding: 20px;
}

Javascript

import './App.css';

function App() {
    return (
        <div className="app-container">
            <div className="content">
                <div style={{
                    width: '500px', height: '300px',
                    overflowX: 'hidden', overflowY: 'auto'
                }}>
                    <div style={{
                        width: '1500px', height:
                            '1200px', background: 'lightblue'
                    }}>
                        <h1>Geeks for Geeks</h1>
                        <p style={{ color: 'red', marginTop: '20px' }}>
                            In this post, we will learn how
                            to remove the scroll bar in ReactJS.
                            Before going to our topic.
                            We must know what is scroll bar.
                            A scroll bar is a graphical
                            user interface( GUI) element
                            in a computer window or
                            application that allows users to
                            navigate through a context that
                            is larger than the visible area.
                            It typically appears on the right
                            and or bottom side of a window.
                            In this post, we will see how to
                            remove the bottom scroll bar using React JS.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

Output:

Output