CSS trick for hiding scrollbars without affecting scrolling
Hiding the scrollbar
Because of the fundamental differences between browsers, there’s no universal way of hiding scrollbars with CSS. Each browser has its method, and we will look at all of them below.
To hide the scrollbar in WebKit-based browsers, you have to use the ::-webkit-scrollbar pseudo selector. ::-webkit-scrollbar is a pseudo-element in CSS used by developers to modify the look of a browser’s scrollbar.
With the ::-webkit-scrollbar pseudo selector, there’s a wide range of things you can do to a scrollbar. You can modify the arrows pointing up and down, change the track’s color, change the background, and more. But we’re only going to look at how to hide the scrollbar without impacting scrolling. Let’s look at an example.
As you can see, in the stackblitz below, the scrollbar is visible on the right. To make it invisible without impacting scrolling, you just have to target the body element using the ::-webkit-scrollbar pseudo selector and set the display to none.
As you can see below, the scrollbar is no longer visible, but the page is still scrollable for both the mouse and keyboard.
In IE (Internet Explorer) and Edge
The syntax for hiding a scrollbar in IE and Edge is a bit different from WebKit-based browsers like Opera, Chrome, and Safari. Here, we have to use the -ms-overflow-style property.
Unlike ::-webkit-scrollbar , you can’t use the -ms-overflow-style to customize the scrollbar. To use it to hide a scrollbar, you just have to use the code below.
If you’re targeting a particular element or section, use the following code.
If you’re targeting the entire page, use this code.
To successfully hide the scrollbar in Firefox, you just need to use the scrollbar-width:none property to target a section like this.
To target the scrollbar of the entire page in Firefox, you have to be a bit more careful. In the two sections above, we applied the scrollbar code to the body tag, and it worked, but with Firefox, we have to target the html tag instead.
Alternatively, you can choose to use this other method to hide the scrollbar in Firefox.
Conclusion
If you are reading this, then by now, you fully understand the art of hiding scrollbars with CSS without impacting scrolling and accessibility. It’s important to note that when targeting sections that have scrollable content, leaving the scrollbar visible as a visual cue will help your users notice the section and not skip it by accident.
Use CSS to hide the scrollbar
There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX). Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow. To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings Let’s see the default UI for scroll elements which will show the scrollbar. We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.
class="scroll-show"> Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value .scroll-show ul max-height: 100px; max-width: 200px; overflow: auto; border: 2px solid #f3f3f3; padding-left: 16px; > Let’s see how it look in the screen You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it. Now, we will add some css to the element to hide the scrollbar: We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.
class="scroll-hide"> Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value .scroll-hide ul max-height: 100px; max-width: 200px; border: 2px solid #f3f3f3; padding-left: 16px; overflow: auto; /* this will hide the scrollbar in mozilla based browsers */ overflow: -moz-scrollbars-none; scrollbar-width: none; /* this will hide the scrollbar in internet explorers */ -ms-overflow-style: none; > /* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */ .scroll-hide ul::-webkit-scrollbar width: 0 !important; display: none; > Let’s see, whether we achieved what we wanted or not Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact. Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.
How to Hide Scrollbars with CSS
If you don’t know how to hide scrollbars for major browsers with pure CSS, you are in the right place!
Hiding scrollbars is useful when the whole content is visible. To hide scrollbars from any element, you can use CSS code.
In this snippet, we will demonstrate how to remove a scrollbar from the and elements.
Let’s see an example and try to discuss each part of the code together.
Create HTML
body> div div div Lorem Ipsum is simply dummy text … div> div> div> body>Add CSS
- Set the width and height properties for the «element» and «outer» classes.
- Set the position to «relative» and the overflow to «hidden» for the «outer» class. Also, add a border.
- Set the left property for the «inner» class and use the «absolute» value of the position property. Specify the overflow-x property with the «hidden» value and overflow-y with the «scroll» value.
- Add a simple rule for -Webkit- browsers.
.element, .outer < width: 300px; height: 300px; > .outer < border: 2px solid #666666; position: relative; overflow: hidden; > .inner < position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; > .inner::-webkit-scrollbar < display: none; >Let’s bring the code parts together to see how it works!
Example of hiding the scrollbar from the element:
html> html> head> title>Title of the document title> style> .element, .outer < width: 300px; height: 300px; > .outer < border: 2px solid #666666; position: relative; overflow: hidden; > .inner < position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; > .inner::-webkit-scrollbar < display: none; > style> head> body> div class="outer"> div class="inner"> div class="element"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised n the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> div> div> body> html>Result
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
Another way to hide the scrollbar is to add the following code:
Now, let’s discuss how to remove a scrollbar from the tag.
The element is used to allow the users to enter text, give feedback, leave comments. By default, the element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up and down.
We need to set the CSS overflow property to «hidden» so as to hide the scrollbar.
Below is an example, where we hide the scrollbar from the element:
Example of hiding the scrollbar from the element:
html> html> head> title>Title of the document title> style> textarea < overflow: hidden; > style> head> body> form> textarea rows="15" cols="30"> Enter your content. textarea> form> body> html>