CSS hide scroll bar, but have element scrollable
I have this element called items and the content inside the element is longer than the element height, I want to make it scrollable but hide the scroll bar, how would I do that?
«[..]I want to make it scrollable but hide the scroll bar» — That would be horrible! Scrollbars have a purpose, and that purpose is to scroll.
Yes, @Abhitalks is correct: that would break the usability of the page.Do hide the scrollbar if it is not needed; don’t hide it if there is more content below the fold. nngroup.com/articles/scrolling-and-scrollbars
9 Answers 9
I combined a couple of different answers in SO into the following snippet, which should work on all, if not most, modern browsers I believe. All you have to do is add the CSS class .disable-scrollbars onto the element you wish to apply this to.
.disable-scrollbars::-webkit-scrollbar < background: transparent; /* Chrome/Safari/Webkit */ width: 0px; >.disable-scrollbars < scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ >And if you want to use SCSS/SASS:
To have this rule apply to all children, .disable-scrollbars * < and .disable-scrollbars *::-webkit-scrollbar
/* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar < display: none; >/* Hide scrollbar for IE, Edge and Firefox */ html < -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ >Similar to Kiloumap L’artélon’s answer,
width: 0; seems to hide the horizontal scrollbar, but leaves a weird empty gap on Chrome desktop 83. display: none; does not have this issue. I threw in both just to be safe.
work on all major browsers
You can hide it on specific div usig class:
.hide-scroll::-webkit-scrollbar < background: transparent; /* make scrollbar transparent */ width: 0px; >if you really want to get rid of the scrollbar, split the information up into two separate pages.
- Offer a scrollbar if an area has scrolling content. Don’t rely on auto-scrolling or on dragging, which people might not notice.
- Hide scrollbars if all content is visible. If people see a scrollbar, they assume there’s additional content and will be frustrated if they can’t scroll.
- Comply with GUI standards and use scrollbars that look like scrollbars.
- Avoid horizontal scrolling on Web pages and minimize it elsewhere.
- Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.
To make your scrollbar only visible when it is needed (i.e. when there is content to scroll down to), use overflow: auto .
This is nice and sensible, but sometimes you really want to do things that sound strange without the context. For example, if you have a complex table component with one or more splitter, and the sections are scroll-synced, you only want the scrollbar on one section because it’s obvious for the user that the whole thing is scrollable as one unit and individual scrollbars only add confusion.
You effectively told the OP that what he is trying to do is wrong. There are cases where it is right (a carousel is the most common one). In the case of a carousel, there is some other UI element that indicates the drag capability (arrows rendered by the application and/or position dots).
so far this answer has had 7 upvotes and 5 downvotes. It seems that opinion is divided. If it was getting downvoted by everyone, I would just delete it, but since it’s not, I am leaving it up.
Hide html horizontal but not vertical scrollbar
I have an HTML textarea that is of fixed width, but variable height. I would like to set overflow:scroll and be able to show a vertical scrollbar, but not a horizontal one. I am not able to use overflow:auto due to other things specific to my situation. I know there is no way using CSS2 to show only vertical but not horizontal scrollbars. Is there anything I can do with JavaScript to hide the horizontal scrollbar?
No, using CSS2 and overflow:scroll; there is no way to show one bar and not the other. It’s inherent in overflow:scroll ; javascript can only do what CSS allows. However, my guess is that you can use overflow:auto, you just don’t know how. Would you elaborate on the «other things specific to your situation»?
9 Answers 9
You can use css like this:
overflow-y: scroll; overflow-x: hidden; I’m seeing that as CSS3, and it doesn’t work in Firefox when I test it. I also see that this is available as an IE-only property from way back in the day.
@wiliamjones — This works in firefox. do you have an example page? Might be some other layout reason it’s not working.
You’re right, it does work with Firefox, it’s the Prototype javascript library that isn’t compatible with this attribute, which was easy enough to work around. Is this property generally reliable across browsers?
@williamjones — Yup, it’s usually the case with these things, browsers implement it, then it’s a standard later as an afterthought.
Use CSS. It’s easier and faster than javascript.
overflow-x: hidden; overflow-y: scroll; Disable horizontal scrollbar completely by adding this code.
Using wrap=virtual in your HTML form boxes gets rid of the horizontal scrollbar at the bottom of the box:
See example here : http://jsbin.com/opube3/2 (Tested on FF and IE)
Working example with snippet and jsfiddle link https://jsfiddle.net/sx8u82xp/3/
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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
How do I remove the horizontal scrollbar in a div?
When I set overflow: scroll , I get horizontal and vertical scrollbars. Is there a way to remove the horizontal scrollbar in a div?
17 Answers 17
it’s a bad solution. Because in this case you just hide horizontal scroll in container. But if this container is too wide your content will not be fit in your container.
Don’t forget to write overflow-x: hidden;
overflow-y: scroll; overflow-x: hidden; CSS
Notice if you remove the -y from the overflow-y property, the horizontal scroll bar is shown.
With overflow-y: scroll , the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:
To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;
One thing to note is that this will only work for WebKit-based browsers (like Chrome) as there is no such option available for Mozilla.
In order to select the scrollbar, use ::-webkit-scrollbar
So the final code will be like this:
Add this code to your CSS. It will disable the horizontal scrollbar.
No scroll (without specifying x or y):
Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more.
&::-webkit-scrollbar:horizontal < height: 0; width: 0; display: none; >&::-webkit-scrollbar-thumb:horizontal
To remove the horizontal scroll bar, use the following code. It 100% works.
If you don’t have anything overflowing horizontally, you can also just use
and it will only show scrollbars when needed.
However, it may happen that your content on the website may not show. So best to inspect element and check the widths of your divs or sections, and remove any right/left margins it may have put in extra. Much better solution
This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.
If you have both an x and y overflow, then both x and y scrollbars will be shown.
To hide the x (horizontal) scrollbar, even if present simply add:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8 and some really long text to make it overflow horizontally.
- Item 9
- Item 10
- Item 11
- Item 12
- Item 13
- Item 14
- Item 15
- Item 16
- Item 17
To hide the scrollbar , but keep the behaviour.
There are limitations to this.
Hide Scrollbars
step 1:
go to any browser for example Google Chrome
click on keyboard ctrl+Shift+i inspect use open tools Developer
step 2:
overflow: hidden; /* Hide scrollbars */ now go to add file .css in project and include file
lastly i encountered this issue the overflow-x property did not help me and i think its a banal solution, i recommend to inspect and check the elements that are potentially big and take more size than the other elements in your page, don’t forget to check the width of some of your container the width based on view (vw) property can restrict your containers and its so practical. good luck.