切换滚动条可见性在 Safari 上不起作用（在 Chrome 上工作）

Question

我试图实现一种行为，即 div 上的滚动条基于类变得可见。 div 需要为overflow:auto，我只想控制滚动条的可见性。

为此，我正在使用这个 -

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

当类not-scrolled添加到div时，滚动条被隐藏，当类被移除时，滚动条变得可见。

您可以在此处检查 jsfiddle 中的行为 - https://jsfiddle.net/naman_anand/39g0h1pk/16/

这在 Chrome 中完全符合预期。但不能在 Safari 中工作。

在 Safari 中，滚动条采用加载时分配给它的样式，然后不会更改，即使添加/删除了更改这些样式的类也是如此。

这就是为什么如果您在 safari 中打开上述小提琴，它将无法正常工作。 但是，如果您在开始时隐藏滚动条（检查这个小提琴 - https://jsfiddle.net/naman_anand/39g0h1pk/18/）并尝试稍后通过删除一个类使其可见，它会保持隐藏状态。

知道为什么在 Safari 中会发生这种情况，以及在 Safari 中切换滚动条可见性的任何方式吗？

Answer 1

css 处理内容溢出的方式全部由overflow 属性处理。如果您希望 div 默认看到滚动条，则将其设置为 scroll。 （你可以设置为自动，但是如果内容没有溢出，它就不会显示滚动条。）

接下来，可以添加 .not-scrolled 类，该类应将 div 更新为 overflow: hidden。 （假设您不希望内容溢出。

类似：

.default-class {
    overflow: scroll;

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

*编辑：误解了原始问题，因为这无法在隐藏滚动条的同时保持滚动。