Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Hide Scrollbar Using CSS?
To hide scrollbar using CSS, we will understand different approaches. Scrollbars are core components of web browsers that allow users to navigate content areas larger than the viewable window. We can hide scrollbars while maintaining scrolling functionality using the overflow property.
Syntax
selector {
overflow-x: value;
overflow-y: value;
}
/* Or shorthand */
selector {
overflow: value;
}
Possible Values
| Value | Description |
|---|---|
visible |
Content is not clipped, may render outside the element |
hidden |
Content is clipped and scrollbars are hidden |
scroll |
Content is clipped but scrollbars are always visible |
auto |
Scrollbars appear only when content overflows |
Method 1: Hiding the Vertical Scrollbar
To hide the vertical scrollbar while keeping horizontal scrolling enabled, set overflow-y: hidden and overflow-x: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
</div>
<p>More content here that would normally cause vertical scrolling.</p>
<p>But the vertical scrollbar is hidden.</p>
</div>
</body>
</html>
A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.
Method 2: Hiding the Horizontal Scrollbar
To hide the horizontal scrollbar while keeping vertical scrolling enabled, set overflow-x: hidden and overflow-y: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is paragraph one with normal text content.</p>
<p>This is paragraph two with more content.</p>
<p>This is paragraph three adding even more text.</p>
<p>This is paragraph four to create overflow.</p>
<p>This is paragraph five for vertical scrolling.</p>
</div>
</div>
</body>
</html>
A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.
Method 3: Hiding Both Scrollbars
To hide both horizontal and vertical scrollbars completely, set both overflow-x and overflow-y to hidden
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This content extends both horizontally and vertically beyond the container boundaries.</p>
<p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
<p>Users cannot scroll to see the hidden content.</p>
</div>
</div>
</body>
</html>
A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.
Conclusion
Hiding scrollbars using CSS overflow properties creates cleaner interfaces. Use overflow: hidden to completely hide scrollbars, or selectively control horizontal and vertical scrolling with overflow-x and overflow-y properties.
532 Views
