Różnica między HTML „overflow: auto” i „overflow: scroll”


123

Kiedy studiowałem wartości overflowwłaściwości, natknąłem się na te dwie wartości: autoi scroll, która dodaje paski przewijania, jeśli zawartość przepełnia element.

Czy ktoś mógłby mi wyjaśnić, jaka jest różnica między nimi?

Odpowiedzi:


185

Auto pokaże pasek przewijania tylko wtedy, gdy jakakolwiek treść zostanie obcięta.

Przewijanie zawsze jednak pokaże pasek przewijania, nawet jeśli cała zawartość pasuje i nie można go przewijać.


2
Wydaje się, że nie ma różnicy, przynajmniej w najnowszej wersji Safari: nawet z scrollnie widzę paska przewijania, jeśli zawartość pasuje. Ale na wszelki wypadek poszedłem z, autoponieważ chcę pokazać pasek przewijania tylko wtedy, gdy zawartość jest obcięta.
ma11hew 28

1
@MattDiPasquale OS X i Windows wyświetlają paski przewijania na różne sposoby. Prawdopodobnie używasz Safari na Macu, prawda? OS X często ukrywa pasek przewijania, dopóki faktycznie nie przewiniesz.
Johan Davidsson

1
Wydaje się, że jest więcej różnic niż to, overlow: scrollsprawia , że pudełko jest cieńsze: jsbin.com/letog/2/edit
Dmitri Zaitsev

W Safari 12 (prawdopodobnie również we wcześniejszych wersjach), chyba że paski przewijania są skonfigurowane tak, aby zawsze się wyświetlały overflow: scrolli overflow: autodziałają identycznie, gdy kontener jest wystarczająco duży, aby pomieścić zawartość.
Luke Worth

15

overflow: scrollukryje całą przepełnioną zawartość i spowoduje pojawienie się pasków przewijania na danym elemencie. Jeśli zawartość się nie przepełni, paski przewijania będą nadal widoczne, ale wyłączone.

overflow: auto jest bardzo podobny, ale paski przewijania pojawiają się tylko wtedy, gdy zawartość jest przepełniona.

Istnieje podobne wyjaśnienie tego problemu , z kilkoma zrzutami ekranu ilustrującymi ten punkt.


2

Spójrz na sztuczki CSS .

Auto pokaże pasek przewijania wtedy i tylko wtedy, gdy zawartość się przepełni; ale scroll zawsze pokaże pasek przewijania, niezależnie od tego, czy zawartość jest przepełniona, czy nie.



0

przepełnienie: przewijanie pokaże zarówno poziomy, jak i pionowy pasek przewijania, nawet jeśli nie potrzebujesz jednego lub drugiego. while, overflow: auto pokaże pasek przewijania, którego potrzebuje twój div. więc w zasadzie auto pomoże ci pozbyć się obu pasków. Oto więcej tego:

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.