时间戳

首页 > 解决方案 > 切换滚动条可见性在 Safari 上不起作用（在 Chrome 上工作）

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

问题描述

我试图实现一种行为，其中 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 中切换滚动条可见性的任何方式吗？

标签： javascripthtmlcssgoogle-chromesafari

解决方案

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

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

就像是：

.default-class {
    overflow: scroll;

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

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

推荐阅读