How to Hide Scrollbar with CSS
Last Updated :
08 Oct, 2024
Hiding the scrollbar with CSS can enhance the look of your webpage by removing visible scrollbars while still allowing users to scroll through content. This can create a cleaner, more streamlined user interface without sacrificing usability. In this article, we’ll explore different methods for hiding scrollbars across various browsers.
Why Hide the Scrollbar?
Hiding the scrollbar can improve the visual appeal of your webpage. However, it’s essential to use this technique judiciously. Consider the following points before deciding to hide scrollbars:
- Content Visibility: Ensure that all essential content is visible without scrolling. Users should be able to see critical information at a glance.
- Avoid Horizontal Scrolling: Hiding horizontal scrollbars can make content difficult to read. Always prioritize readability and user experience.
- User Awareness: If hiding scrollbars, ensure that users are aware of additional content available through scrolling. Display crucial information above the fold.
CSS Techniques for Hiding Scrollbars
1. Webkit Browsers (Chrome, Safari, and Opera)
For browsers like Chrome and Safari, you can use the ::-webkit-scrollbar pseudo-element to hide the scrollbar:
.element::-webkit-scrollbar {
display: none; /* Hides the scrollbar */
}2. Firefox
In Firefox, you can hide the scrollbar by using the following CSS:
.element {
overflow: -moz-scrollbars-none; /* Hides the scrollbar */
}Important Points to be considered before hiding the Scroll bar:
- Preferably Hide scrollbars only when if all content is visible else user may skip the content
- Avoid horizontal scrolling on Web pages and do not hide horizontal scroll bar as they can make content difficult to read
- If at all , hiding scroll is required : Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Note: The practical example of hiding the scroll bar is Facebook chat window.
Example: In this example we creates a scrollable .outer-border with a hidden scrollbar and justified text .content inside, styled with green background, white text, and black border.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.content,
.outer-border {
width: 240px;
height: 150px;
text-align: justify;
background-color: green;
color: white;
padding-left: 10px;
padding-right: 10px;
}
.outer-border {
border: 2px solid black;
position: relative;
overflow: hidden;
}
.inner-border {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-border::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="outer-border">
<div class="inner-border">
<div class="content">
GeeksforGeeks is a computer science portal.
It is a good platform to learn programming. It is an educational
website. Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a free online
placement preparation course. The course focuses on various
MCQ's & Coding question likely to be asked in the interviews
& make your upcoming placement season efficient and successful.
</div>
</div>
</div>
</body>
</html>
Output:
Example: This example hides the scrollbar in .inner-border by using overflow-y: scroll; and ::-webkit-scrollbar { display: none; }, displaying images within a .outer-border with a fixed size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
hide scrollbar
</title>
<style>
.content,
.outer-border {
width: 500px;
height: 210px;
}
.outer-border {
border: 2px solid black;
position: relative;
overflow: hidden;
}
.inner-border {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-border::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="outer-border">
<div class="inner-border">
<div class="content">
<img src="https://media.geeksforgeeks.org/
wp-content/uploads/Screenshot-73-1.png"/>
<img src="https://media.geeksforgeeks.org/
wp-content/uploads/Screenshot-74-4.png"/>
</div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element
1 min read
How to remove the space between inline-block elements? To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin
3 min read
6 Best CSS frameworks You should Know to design Attractive Websites If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz
3 min read
Space between two rows in a table using CSS The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp
1 min read
What is the difference between display: inline and display: inline-block in CSS? The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If w
4 min read
How to Write a:hover in Inline CSS? The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff
2 min read
How to place two div side-by-side of the same height using CSS? The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which
2 min read
What is a clearfix? A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow
3 min read
Making a div Vertically Scrollable using CSS The overflow property in CSS controls how content that goes beyond an element's boundaries is handled. It can either hide the extra content or add scrollbars so users can scroll to see more without leaving the current view. This helps display large amounts of content, such as text, images, or tables
3 min read
How to give a div tag 100% height of the browser window using CSS CSS allows to adjustment of the height of an element using the height property. While there are several units to specify the height of an element. Set the height of a <div> to 100% of its parent container with height: 100%, or use height: 100vh; for a full viewport height, ensuring the <div
2 min read