Learn how to hide a scrollbar just by using css while still allowing to scroll.
We think it would be really complex to hide the scrollbar, but guess what it is very simple.
On DOM any content that is outside the viewport (screen-width and screen-height) or defined viewport (manually set width and height) can be scrolled to view it.
We can either use mouse or keyboard button to scroll through the given area. However sometimes we want to hide the scrollbar while still keeping the area scrollable.
Hiding vertical scrollbar
Vertical scroll bar are on the y-axis and they utilise the width to be displayed. Setting the width to zero will hide the scroll bar on webkit browsers.
Each browser have their own set of properties for scrollbar so use them accordingly.
//-webkit- (Chrome, Safari, newer versions of Opera):
//element-selector::-webkit-scrollbar { width: 0 !important }
.hideScrollbar::-webkit-scrollbar { width: 0 !important }
//-moz- (Firefox):
//element-selector{ overflow: -moz-scrollbars-none; }
.hideScrollbar{ overflow: -moz-scrollbars-none; }
//-ms- (Internet Explorer +10):
//element-selector{ -ms-overflow-style: none; }
.hideScrollbar{ -ms-overflow-style: none; }
Hide horizontal scrollbar using css
Horizontal scroll bar are on the x-axis and they utilise the height to be displayed. Setting the height to zero will hide the scroll bar on webkit browsers.
For other browsers use their respective properties.
//-webkit- (Chrome, Safari, newer versions of Opera):
//element-selector::-webkit-scrollbar { height: 0 !important }
.hideScrollbar::-webkit-scrollbar { height: 0 !important }
//-moz- (Firefox):
//element-selector{ overflow: -moz-scrollbars-none; }
.hideScrollbar{ overflow: -moz-scrollbars-none; }
//-ms- (Internet Explorer +10):
//element-selector{ -ms-overflow-style: none; }
.hideScrollbar{ -ms-overflow-style: none; }
Note:
Before hiding the scroll bars make sure the user has effective way to realise that this current area is scrollable, Failing do so will be a bad UI/UX practice.
