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

user_6039153 0
Viewed 15615

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?

safari css
3 Answers

Depending on how your element is positioned / layered using z-index, in addition to hiding the appearance of the scrollbar, you may also need to set the width/height of the scrollbar to 0. Otherwise, the contents that would be contained under the scroll track area may be hidden.

.element::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
    height: 0;
}
user_1651620

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;
}
user_24799030
user_27904440
Related