Toggling scrollbar visibility not working on Safari (working on Chrome)

Question

Im trying to implement a behaviour where a scrollbar on a div becomes visible based on a class. The div needs to be overflow:auto , i want to control just the visibility of the scrollbar.

For that i am using this -

.not-scrolled::-webkit-scrollbar {
    display:none;
}

When the class not-scrolled is added to the div, the scrollbar gets hidden, when the class is removed, the scrollbar becomes visible.

You can check the behaviour in the jsfiddle here - https://jsfiddle.net/naman_anand/39g0h1pk/16/

This is working exactly as expected in Chrome. But not working in Safari.

In Safari, the scrollbar takes the styles assigned to it at load time, and then does not change, even if a class is added/removed changing those styles.

Thats why if you open the above fiddle in safari, it will not work. But if you hide the scrollbar in the beginning ( check this fiddle - https://jsfiddle.net/naman_anand/39g0h1pk/18/ ) and try to make it visible later by removing a class, it stays hidden.

Any idea why is this happening in Safari, and any way of toggling the visibility of a scrollbar in Safari?

Answer 1

How css handles an overflow of contents is all handled by the overflow property. If you want the div to default to see the scroll bar, then set it to scroll . (You can set it to auto, but then it won't show the scroll bar if the contents don't overflow.)

Next, the .not-scrolled class can be added which should update the div to overflow: hidden . (Assuming you don't want the contents to overflow.

Something like:

.default-class {
    overflow: scroll;

    &.not-scrolled {
        overflow: hidden;
    }
}

*Edit: Misinterpreted the original question, as this doesn't keep the ability to scroll while hiding the scroll bar.