blocks|key|623074|text|当任何内容被剪切时，自动将只显示滚动条。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|623075|然而，Scroll将始终显示滚动条，即使所有内容都适合，并且您无法滚动它。|623076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Auto will only show a scrollbar when any content is clipped.

Scroll will however always show the scrollbar even if all content fits and you cant scroll it.

blocks|key|838914|text|overflow:+scroll将隐藏所有溢出的内容，并使滚动条出现在有问题的元素上。如果内容没有溢出，滚动条将仍然可见，但会被禁用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|838915|overflow:+auto非常类似，但只有在内容溢出时才会出现滚动条。|838916|对于这个here也有类似的解释，并用一些截图来说明这一点。|838917|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/the-css-overflow-property/^0|0|G|0|0|E|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<code>overflow: scroll</code> will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.

<code>overflow: auto</code> is very similar, but the scrollbars only appear when the content is overflowing.

There is a similar explanation of this <a href="https://css-tricks.com/the-css-overflow-property/" rel="noreferrer">here</a>, with some screenshots to illustrate the point.

blocks|key|838965|text|看看CSS+Tricks吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|838966|当且仅当内容溢出时，自动将显示滚动条；但无论内容是否溢出，滚动条都将始终显示滚动条。|838967|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/the-css-overflow-property/^0|2|A|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Take a look at <a href="https://css-tricks.com/the-css-overflow-property/" rel="nofollow">CSS Tricks</a>.

Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.

blocks|key|623243|text|在回答中补充一点，当容器的位置是绝对Position+relative+overflow+IE7时，Overflow:auto在IE7中不起作用。但是设置Overflow:scroll是可行的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|623244|entityMap|0|LINK|mutability|MUTABLE|url|http://snook.ca/archives/html_and_css/position_relative_overflow_ie/^0|1E|D|25|F|I|U|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Adding a point to the answer, <code>Overflow:auto</code> not worked in IE7 when position of the container is absolute <a href="http://snook.ca/archives/html_and_css/position_relative_overflow_ie/" rel="nofollow">Position relative overflow IE7</a>. But setting <code>Overflow:scroll</code> works

blocks|key|623286|text|溢出:滚动将同时显示水平和垂直滚动条，即使你不需要一个或另一个。而overflow:+auto将显示div所需的滚动条。因此，基本上自动将帮助您摆脱这两个scollbar。下面是更多的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|623287|https://css-tricks.com/the-css-overflow-property/|offset|length|623288|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar.
Here is more of that:

<a href="https://css-tricks.com/the-css-overflow-property/" rel="nofollow noreferrer">https://css-tricks.com/the-css-overflow-property/</a>

blocks|key|839155|text|在Windows中，overflow:+scroll将始终显示滚动条，overflow:+auto仅在内容溢出时才显示滚动条。在macOS中，如果内容溢出，overflow:+scroll和overflow:+auto将始终显示滚动条。在Chrome上测试过。我强烈推荐使用overflow:+auto，因为它以同样的方式工作，并且不会在windows中产生问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|839156|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows

When I was studying the <code>overflow</code> property's values, I came across these two values: <code>auto</code> and <code>scroll</code>, which adds scrollbar(s) if the content overflows the element. 

Could someone please explain me whats the difference between them?

Difference between HTML "overflow : auto" and "overflow : scroll"

Windows

容器

在研究overflow属性的值时，我遇到了这两个值：auto和scroll，如果内容溢出元素，它会添加滚动条。有人能给我解释一下它们之间的区别吗？

问HTML "overflow : auto“与"overflow : scroll”的区别
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML "overflow : auto“与"overflow : scroll”的区别EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML "overflow : auto“与"overflow : scroll”的区别
EN