HTML“溢出：自动”和“溢出：滚动”之间的区别答案

【问题标题】：Difference between HTML "overflow : auto" and "overflow : scroll"HTML“溢出：自动”和“溢出：滚动”之间的区别
【发布时间】：2011-10-05 02:06:49
【问题描述】：

当我研究overflow 属性的值时，我遇到了这两个值：auto 和scroll，如果内容溢出元素，它们会添加滚动条。

有人能解释一下它们之间的区别吗？

【问题讨论】：

标签： html css

【解决方案1】：

自动只会在任何内容被剪辑时显示滚动条。

但是，即使所有内容都适合并且您无法滚动，滚动也会始终显示滚动条。

【讨论】：

至少在最新版本的 Safari 上似乎没有区别：即使使用scroll，如果内容合适，我也看不到滚动条。但是，为了安全起见，我选择了auto，因为我只想在剪辑内容时显示一个滚动条。
@MattDiPasquale OS X 和 Windows 以不同的方式显示滚动条。您可能在 Mac 上使用 Safari 对吧？ OS X 通常会隐藏滚动条，直到您真正滚动为止。
似乎还有比这更多的区别，overlow: scroll 让盒子更薄：jsbin.com/letog/2/edit
在 Safari 12（也可能是更早的版本）中，除非滚动条配置为始终显示，否则overflow: scroll 和overflow: auto 在容器足够大以容纳内容时在功能上是相同的。跨度>

【解决方案2】：

overflow: scroll 将隐藏所有溢出的内容并导致滚动条出现在相关元素上。如果内容没有溢出，滚动条仍然可见，但被禁用。

overflow: auto很相似，只是滚动条只有在内容溢出时才会出现。

这个here也有类似的解释，用一些截图来说明这一点。

【讨论】：

【解决方案3】：

看看CSS Tricks。

当且仅当内容溢出时自动显示滚动条；但是无论内容是否溢出，滚动都会始终显示滚动条。

【讨论】：

【解决方案4】：

在答案中添加一点，当容器的位置是绝对的Position relative overflow IE7 时，Overflow:auto 在 IE7 中不起作用。但是设置Overflow:scroll 有效

【讨论】：

【解决方案5】：

overflow：即使您不需要滚动条，滚动条也会同时显示水平和垂直滚动条。同时，溢出：自动将显示您的 div 需要的滚动条。所以基本上 auto 会帮助你摆脱两个 scollbar。以下是更多内容：

https://css-tricks.com/the-css-overflow-property/

【讨论】：

【解决方案6】：

在 Windows 中，overflow:scroll 将始终显示滚动条，并且 overflow:auto 仅在内容溢出时才显示滚动条。在 macOS 中，如果内容溢出，则 overflow:scroll 和 overflow:auto 将始终显示滚动条。在 Chrome 中测试。我强烈建议使用溢出：自动，因为它的工作方式相同并且不会在 Windows 中产生问题

【讨论】：

欢迎来到 Stack Overflow。请务必在提供您自己的答案之前阅读所有现有答案，以确保您不会只是重复已经提供的信息。