Переполнение автоматически на странице, применяемой к HTML или BODY, по умолчанию?

Question

На простой странице, где не указано свойство переполнения, если содержимое переполняется, появляются полосы прокрутки окна.

Является ли overflow: auto или scroll, которые использует браузер, по умолчанию в HTML или в элемент BODY?

Пример:

div { 
 
    height: 200vh; 
 
    border: 10px solid; 
 
}

<div></div>

Answer 1

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

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

Использование свойства переполнения со значением, отличным от видимого (его по умолчанию) создаст новый контекст форматирования блока. Это технически необходимо - если поплавок пересекается с элементом прокрутки , он принудительно перезаписывает содержимое. После каждого шага прокрутки произойдет перезапись , что приведет к медленному прокручиванию.

visible, однако, отличается от scroll, который обеспечивает соблюдение полосы прокрутки, даже если не происходит отсечение. Видимый позволяет отображать содержимое за пределами области просмотра и позволяет появляться полосы прокрутки, когда содержимое переполняет начальный видовой экран.

В вашем примере body является причиной полос прокрутки. Содержимое вашего тела отображается за пределами области просмотра (внутри него находится div). Поэтому он автоматически отображает полосы прокрутки, относящиеся к телу, - полосы прокрутки отображаются на viewport вместо самого элемента.

Пример:

html, body { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
div { 
 
    background-color: #F00; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div></div>

Цитата от: https://developer.mozilla.org/nl/docs/Web/CSS/overflow

Answer 2

Его значение по умолчанию overflow:visible;

Свойство переполнения контролирует то, что происходит с данными, нарушающими вне его границы. вот что вы можете установить для этого:

• visible: содержимое не обрезается, когда оно выходит за пределы его окна. Это значение по умолчанию для свойства.
• скрытый: переполнение содержимого будет скрыто.
• прокрутка: аналогичная скрытой, кроме пользователей, сможет прокручивать скрытый контент. полоса прокрутки появляется, даже если для прокрутки нет содержимого.
• auto: если содержимое выходит за пределы его поля, то этот контент будет скрыт, а содержимое полосы прокрутки должно быть видимым для пользователей, чтобы читать остальную часть содержимого.
• initial: использует значение по умолчанию, которое видно
• inherit: устанавливает переполнение в значение его родительского элемента.

Вот некоторые хорошие ресурсы:

http://www.w3schools.com/jsref/prop_style_overflow.asp

https://developer.mozilla.org/en/docs/Web/CSS/overflow