How to hide the scrollbar in a div and set aside the ability to scroll?

Question

css

You need to hide the scrollbar, but leave the scrolling option (for example, using the mouse wheel).
Or maybe make the scrollbar transparent somehow?

Answer 1

If you do as advised above, then mobile browsers will suffer. They scroll does not take up space, as on desktops, so the text will go beyond the right border.
There is another solution:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

From here: hiding-vertical-scrollbars-with-pure-css-in-chrome...

Answer 2

Hey! It's 2019 now and it works like this:

Answer 3

this is how it works

Answer 4

100% working Chrome, Safari, IE etc

.elem {
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
}

.elem::-webkit-scrollbar {
      width: 0;
      height: 0;
}

Answer 5

jsfiddle.net/H8xfD/ Use, but on condition that the width is known. The comment above is 100% correct.

Answer 6

And then hope that the person will guess about the possibility of scrolling? Or draw your own scrollbar?

Answer 7

scrollbar-width: none for mozilla
::-webkit-scrollbar for others

Answer 8

In the style - overflow:hidden, and the events of the wheel will have to be processed by yourself.
Other options are detailed here.

Answer 9

Try www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Answer 10

What if the right margin is negative, and the parent has overflow:hidden .

Answer 11

There is a good option:

<div class="div1">
  <div class="div2">
    Тут контент
  </div>
</div>

.div1 {
  width: 300px;
  height: 500px;
  overflow: hidden;
}
.div2 {
  overflow-y: scroll;
  max-height: 100%;
  width: 100%;
  padding-right: 45px;
  background: lightpink;
}