Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHPHide Scrollbar Using CSS
To hide scrollbar using CSS, we will understand different approaches. Scrollbars are one of the core components of web browsers where users navigate in a content area wider than a viewable window.
In this article, we have discussed three approaches for hiding the scroll bars using CSS and when each might be useful. We can hide the scrollbar in below mentioned directions ?
1. Hiding the Vertical Scrollbar
- In this case, we disable the vertical bar but enable the vertical scrolling of the page as the user can scroll vertically.
- By setting overflow-y: hidden, we hide the vertical scroll bar and using overflow-x: scroll allows horizontal scrolling.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Hiding Vertical Scrollbar</title> <style> .child { height: 150px; width: 300px; overflow-y: hidden; overflow-x: scroll; border: 1px solid black; } p { white-space: nowrap; } </style> </head> <body> <div class="parent"> <div class="child"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam odio saepe molestias nam, iste in</p> <p>corrupti, nostrum minus dolores, ut omnis? Quaerat necessitatibus asperiores minima magni excepturi ullam, ad sit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti consequuntur, culpa sapiente dolores</p> <p>distinctio rerum ea quam inventore nostrum cupiditate debitis quis accusantium? Corporis provident deleniti culpa, aliquam sequi repellat?</p> </div> </div> </body> </html> Hiding the Horizontal Scrollbar
- In this second example, we set its horizontal scrollbar to be invisible, while enabling horizontal scrolling.
- By setting overflow-y: scroll, we allow the vertical scroll bar and using overflow-x: hidden disables horizontal scrolling.
- Additionally, white-space: Nowrap ensures that the text can never wrap this and in turn forces the user to scroll horizontally.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Hiding Horizontal Scrollbar</title> <style> .child { height: 150px; width: 300px; overflow-y: scroll; overflow-x: hidden; border: 1px solid black; } p { white-space: nowrap; } </style> </head> <body> <div class="parent"> <div class="child"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam odio saepe molestias nam, iste in</p> <p>corrupti, nostrum minus dolores, ut omnis? Quaerat necessitatibus asperiores minima magni excepturi ullam, ad sit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti consequuntur, culpa sapiente dolores</p> <p>distinctio rerum ea quam inventore nostrum cupiditate debitis quis accusantium? Corporis provident deleniti culpa, aliquam sequi repellat?</p> </div> </div> </body> </html> 3. Hiding Scrollbars in Both Directions
- In this third instance, we set its horizontal and vertical scrollbar to be invisible.
- Both overflow-x and overflow-y are set to hidden.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Hiding bothScrollbars</title> <style> .child { height: 150px; width: 300px; overflow-y: hidden; overflow-x: hidden; border: 1px solid black; } p { white-space: nowrap; } </style> </head> <body> <div class="parent"> <div class="child"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam odio saepe molestias nam, iste in</p> <p>corrupti, nostrum minus dolores, ut omnis? Quaerat necessitatibus asperiores minima magni excepturi ullam, ad sit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti consequuntur, culpa sapiente dolores</p> <p>distinctio rerum ea quam inventore nostrum cupiditate debitis quis accusantium? Corporis provident deleniti culpa, aliquam sequi repellat?</p> </div> </div> </body> </html> Conclusion
In this article we applied hiding scroll bars because it is clean looking to the eyes and makes content easily reachable. There are certain CSS rules such as overflow, margin, and padding which you can use to turn either vertical and/or horizontal scroll bars off according to your design needs.
Updated on: 2025-01-28T12:52:31+05:30
146 Views
Advertisements
