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?

Try to look on this may be it will helpful for your https://stackoverflow.com/questions/11691718/css-webkit-scrollbar-and-safari — DevProf, Nov 17 '17 at 08:54

score 5 · Answer 1 · answered Jul 06 '19 at 05:20

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

score 3 · Answer 2 · answered Nov 17 '17 at 08:50

3

You should also add this :

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

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

answered Nov 17 '17 at 08:50

MisaGH

1,124
1
10
23

Thank you for answer! But it didn't help. It's very strange, as it obviously should work for Safari just like it works for Chrome. One more detail, i have this problem in a system based on Sencha ExtJS framework. But i think it's not the cause. – gregory Nov 17 '17 at 11:45

score 1 · Answer 3 · answered Sep 05 '20 at 16:53

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

answered Sep 05 '20 at 16:53

Daniel Smith

1,294
18
42

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

3 Answers3

Linked