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 : 100 vh; } .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>Beginner for Beginner</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 : 100 vh; } .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>Beginner for Beginner</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:
Contact Us