How to remove horizontal scrollbar in React JS ?

Last Updated : 26 Jul, 2024

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:

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;