У деяких студентів виникало питання як зробити в html блоці scrolling. Розберемо цей нескладний питання з різних сторін на прикладі div з текстом-рибою.
Припустимо у нас є html-блок, наприклад div, в якому є якась кількість контенту. Подивимося в якому разі в ньому з'явиться scrolling.
Нехай ми маємо такий div (подивимося як зробити так щоб в ньому відображався scrolling), см. Html-код блоку далі:
За замовчуванням блок буде розтягуватися на всю ширину свого контейнера і розтягуватися по висоті в залежності від розміру контенту:
Veryveryveryverylongword-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Тепер зазначимо фіксовану ширину і висоту нашому html div-у:
FYI: Для зручності читання статті, в лістингах коду, замість тексту-риби, я пишу три крапки.
З зафіксованими розмірами поведінку у блоку як показано нижче: div обмежився в розмірах, проте контент виходить за його межі і все одно видно, як по вертикалі так і по горизонталі якщо зустрічається слово, яке не можна перенести. Див. Далі приклад:
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Браузер рендерить html так як показано вище, тому що властивість overflow блоку div по-замовчуванню має значення visible. Тобто все що переповнює розміри блоку - залишатиметься видатним. Давайте спробуємо змінити значення цього css-властивості на hidden і подивимося що буде:
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Але, слава богу, в css є можливість змусити html блок div відображати в такому випадку scrolling. Для цього потрібно змінити значення overflow на auto. Давайте подивимося як це виглядає:
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Значення властивості overflow auto говорить про те що браузер буде відображати контрол scrolling тільки в тому випадку якщо це необхідно, якщо ні - не буде навіть натяку на скролл. Давайте приберемо майже весь контент і подивимося:
Є ще одне значення властивості overflow - scroll. Воно скаже браузеру, що у даного div-а потрібно відображати scrolling, навіть якщо контенту мало. В цьому випадку scrolling просто буде показаний неактивним. дивіться:
При появі достатньої кількості контенту в контейнері div, scrolling стає активним і працює точно як у випадку з auto. Дивіться приклад:
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Це вся основна інформація з управління scrolling-му в html для блоку div за допомогою css. Зверніть увагу на css-властивості overflow-x і overflow-y (ці властивості реалізовані CSS3). Вони дозволять керувати поведінкою div при переповненні контентом по осях x і y відповідно по-окремо.