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

123

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

有人可以解释一下他们之间的区别吗？

html css

— 吉里什
source

185

“自动”仅在剪切任何内容时显示滚动条。

但是，即使所有内容都适合且您无法滚动，“滚动”仍将始终显示滚动条。

— 约翰·戴维森（Johan Davidsson）
source

2

至少在最新版本的Safari上似乎没有什么区别：即使使用scroll，如果内容合适，我也看不到滚动条。但是，为了安全起见，我选择了该选项，auto因为我只想在剪切内容时显示一个滚动条。

— ma11hew28 2012年

1

@MattDiPasquale OS X和Windows以不同的方式显示滚动条。您可能在Mac上使用Safari，对吗？OS X通常会隐藏滚动条，直到您实际滚动为止。

— 约翰·戴维森

1

似乎还有更多不同，这overlow: scroll使盒子更薄：jsbin.com/letog/2/edit

— Dmitri Zaitsev

在Safari 12中（可能也是早期版本），除非滚动条配置为始终显示，overflow: scroll并且overflow: auto在容器足够大以容纳内容时功能相同。

— 卢克·沃思

15

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

overflow: auto 非常相似，但是滚动条仅在内容溢出时显示。

有这样一个类似的解释在这里，有一些截图来说明这一点。

— 詹姆斯·阿勒迪斯
source

2

看一下CSS Tricks。

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

— 萨米尔乔汉
source

1

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

— 基拉
source

0

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

— Manish乔希
source