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
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.
