Hiding scrollbars via css doesn't work in Safa

问题:

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?

回答1:

You should also add this :

.element::-webkit-scrollbar {
    -webkit-appearance: none;
}

Also check this answer. Useful Hiding the scrollbar on an HTML page

回答2:

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;
}