Разница между HTML "overflow: auto" и "overflow: scroll"


123

Когда я изучал overflowзначения свойства, я натолкнулся на эти два значения: autoи scroll, которые добавляют полосы прокрутки, если содержимое переполняет элемент.

Может кто-нибудь объяснить мне, в чем разница между ними?

Ответы:


185

Авто будет отображать полосу прокрутки только тогда, когда какой-либо контент обрезан.

Однако при прокрутке всегда отображается полоса прокрутки, даже если все содержимое умещается и вы не можете его прокрутить.


2
Кажется, нет разницы, по крайней мере, в последней версии Safari: даже с scroll, я не вижу полосу прокрутки, если контент подходит. Но на всякий случай я пошел с этим, autoпотому что я хочу показывать полосу прокрутки только тогда, когда контент обрезан.
ma11hew28 05

1
@MattDiPasquale OS X и Windows по-разному отображают полосы прокрутки. Вы, наверное, используете Safari на Mac, верно? OS X часто скрывает полосу прокрутки, пока вы не прокрутите ее.
Johan Davidsson

1
Кажется, что разница больше, чем это overlow: scrollделает коробку тоньше: jsbin.com/letog/2/edit
Дмитрий Зайцев

В Safari 12 (возможно, и в более ранних версиях), если полосы прокрутки не настроены на постоянное отображение overflow: scrollи overflow: autoфункционально идентичны, если контейнер достаточно велик, чтобы вместить содержимое.
Люк Уорт

15

overflow: scrollскроет все переполненное содержимое и вызовет появление полос прокрутки на рассматриваемом элементе. Если содержимое не переполняется, полосы прокрутки все равно будут видны, но отключены.

overflow: auto очень похоже, но полосы прокрутки появляются только при переполнении содержимого.

Существует аналогичное объяснение этого здесь , с некоторыми скриншотами , чтобы проиллюстрировать этот момент.


2

Взгляните на CSS Tricks .

Авто будет показывать полосу прокрутки тогда и только тогда, когда содержимое переполняется; но при прокрутке всегда будет отображаться полоса прокрутки, независимо от того, переполнено ли содержимое или нет.



0

overflow: scroll будет отображать как горизонтальную, так и вертикальную полосу прокрутки, даже если вам не нужна одна или другая. в то время как overflow: auto покажет полосу прокрутки, которая нужна вашему div. так что в основном auto поможет вам избавиться от обеих полос прокрутки. Вот еще об этом:

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.