Hiding scrollbars via css doesn't work in Safari, how to fix it?

Question

I'm trying to hide scrollbars of an html element by means of the CSS rule:

.element::-webkit-scrollbar {width: 0;}

It works fine in Chrome, but doesn't work in Safari, although is't also webkit-based and should support this rule.

Any ideas, why should it happen and how to fix?

Answer 1

For Cross Browser, use following -

.hide-scrollbar {
  /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.hide-scrollbar::-webkit-scrollbar {
  /*Chrome, Safari, Edge*/
  display: none;
}