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?
<div class="left-side">
<div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
</div>
</div>
.left-side {
width: 1470px;
padding-top: 20px;
height: 878px;
}
I tried setting the left-side class overflow to auto, but that didn't do anything.
You can hide it :
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
For further information, see : Hide scroll bar, but while still being able to scroll
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 {
width: 0px;
background: transparent; /* Chrome/Safari/Webkit */
}
.disable-scrollbars {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
And if you want to use SCSS/SASS:
.disable-scrollbars {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
width: 0px;
background: transparent; /* Chrome/Safari/Webkit */
}
}
Hope this helps
/* 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,
::-webkit-scrollbar {
display:none;
}
works too
work on all major browsers
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
if you use sass, you can try this
&::-webkit-scrollbar {
}
if you really want to get rid of the scrollbar, split the information up into two separate pages.
Usability guidelines on scrollbars by Jakob Nielsen:
There are five essential usability guidelines for scrolling and scrollbars:
- 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.
You can make use of the SlimScroll plugin to make a div scrollable even if it is set to overflow: hidden;(i.e. scrollbar hidden).
You can also control touch scroll as well as the scroll speed using this plugin.
Hope this helps :)
Source: Stackoverflow.com