Chrome自动隐藏垂直滚动条。

Question

我有一个问题。

基本上，我有3个div，一个主容器和两个div，它们的宽度将是主容器宽度的一半，如下所示:

<div id="main">
    <div id="col1"></div>
    <div id="cold2"></div>
</div>

#col1 {
  overflow-y: auto;
  width: 48%
}
#main {
  width: 100%
}
#col2 {
  width: 48%
}

看起来问题是每次我动态添加内容到Col1时，期望有一个滚动条，但Chrome会创建它，却将其隐藏。因此，我必须去该元素并通过鼠标滚轮开始滚动才能看到它。有没有一种方法可以覆盖这个行为？

- theintersect

---

忘了提一下，我的操作系统是Mac。似乎自从OS Lion以来，Mac会自动隐藏滚动条。要手动覆盖此设置，您必须转到“系统偏好设置”->“通用”->“显示滚动条”->设置为“始终”。仍在思考是否有通过CSS或JavaScript覆盖此设置的方法。 - theintersect

你可以查看 ::-webkit-scrollbar 来样式化滚动条，以防止它们隐藏。这只是一个想法，不确定是否有效。 - Rob Farr

但是如果你没有任何限制col1高度的东西，它就会不断增长，因此不需要滚动条...记住，将overflow设置为auto意味着如果不需要滚动条，它就不会出现。 - vals

请查看以下问题：https://dev59.com/zmsz5IYBdhLWcg3wfn-6 - btevfik

Answer 1

这是一项 Mac 设置，Chrome 遵循此设置。请前往“系统偏好设置 > 通用”，将“显示滚动条”设置更改为“始终”。

- jimbishopp

---

很酷，谢谢。我的设置是“根据输入设备自动调整”，因为我连接了鼠标和触摸板，所以它总是显示滚动条... - Mike Mitterer

看起来他们现在强制显示滚动条，无论您的操作系统设置如何。 - Derek 朕會功夫

要求用户在使用你的网站之前更改其操作系统偏好设置并不是解决方案。 - Nathan Arthur