CSS hide scroll bar, but have element scrollable

Question

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 {     height: 878px;     padding-top: 20px;     width: 1470px; } 

I tried setting the left-side class overflow to auto, but that didn't do anything.

Answer 1

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

Answer 2

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:

.disable-scrollbars {   scrollbar-width: none; /* Firefox */   -ms-overflow-style: none;  /* IE 10+ */    &::-webkit-scrollbar {     background: transparent; /* Chrome/Safari/Webkit */     width: 0px;   } }