Question

我正在尝试实现一种行为，其中div上的滚动条基于类变为可见。 div必须为overflow:auto，我只想控制滚动条的可见性。

为此，我正在使用它-

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

将类not-scrolled添加到div中时，滚动条将隐藏，而当删除类时，滚动条将变为可见。

此功能完全可以在Chrome中正常运行。但不能在Safari中使用。

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

这就是为什么如果您在野生动物园中打开上述小提琴，它将无法正常工作的原因。但是，如果您在开始时隐藏滚动条（请检查此小提琴-https://jsfiddle.net/naman_anand/39g0h1pk/18/），并在以后尝试通过删除类使它可见，那么它将保持隐藏状态。

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

Answer 1

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

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

类似的东西：

.default-class {
    overflow: scroll;

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

*编辑：错误地解释了原始问题，因为在隐藏滚动条时并不能保持滚动的能力。