CSS hides scrollbar but has scrollable element

Question

I have this element called elements, and the contents inside the element are longer than the height of the element, I want to make it scrollable, but hide the scroll bar, how would I do it?

<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 class overflow on the left to auto, but it did nothing.

Answer 1

You can hide this:

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For more information, see: Hide the scroll bar, but still have the ability to scroll

Answer 2

if you really want to get rid of the scrollbar, split the information into two separate pages.

:

:

• , . , .
• , . , , .
• GUI , .
• - .
• . , , , . , 20% .

, ( , , ), overflow: auto.

Answer 3

SlimScroll, div, ​​ overflow: hidden; (, ).

, .

, :)

Answer 4

Kiloumap L'artélon,

::-webkit-scrollbar {
    display:none;
}

Answer 5

I put together several different answers in SO in the following snippet, which should work on all, if not most, modern browsers, as it seems to me. All you have to do is add a CSS class .disable-scrollbarsto the element, to which .disable-scrollbarsyou want to apply it.

.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 */
  }
}

Answer 6

if you use sass you can try this

&::-webkit-scrollbar { 

}