Як створити контейнери, що горизонтально прокручуються.
Контейнери з горизонтальним прокручуванням стають все більш популярними. Особливо серед мобільно-оптимізованих сайтів, де вони використовуються для зменшення висоти веб-сторінок.
Після реалізації кількох таких елементів я захотів з'ясувати, як за допомогою мінімального обсягу коду створити горизонтальну прокрутку, яка коректно працює, на всіх типах пристроїв користувача.
Існує два способи зробити ці div горизонтально прокручуються.
Оновлено: 2024-10-12 12:24:54 Вадим Дворніков автор матеріалу
Метод порожнього простору
Ось CSS, який нам потрібний. Жодних префіксів і jQuery. Просте використання overflow та ще однієї властивості.
Для контейнера потрібно вимкнути вертикальну прокручування (overflow-y) і включити горизонтальну (overflow-x). Потім для кожної картки встановимо display: inline-block, щоб вони відображалися в рядку.
Властивість CSS, з якою ви, мабуть, не зустрічалися - це white-space: nowrap. Воно використовується для керування тим, як текст переноситься у контейнері. В даному випадку ми хочемо вимкнути перенесення за допомогою значення nowrap.
Чотири рядки властивостей CSS, і у нас є горизонтально прокручується контейнер.
Як щодо підтримки браузерами? Ідеально. Якщо ви не дбаєте про Internet Explorer або Edge. У Microsoft говорять, що вони включать підтримку цієї властивості до майбутньої версії браузера Edge.
Враппер це обгортка або контейнер у програмуванні, який використовується для інкапсуляції різних елементів.
Метод Flexbox
Flexbox також може виконати цю роботу.
.scrolling-wrapper-flexbox < display: flex; flex-wrap: nowrap; overflow-x: auto; .card < flex: 0 0 auto; >>
Ми використовуємо flex-wrap для досягнення того самого ефекту, що й у попередньому прикладі.
Підтримка браузерами рішення на основі flexbox краще. Воно працює в IE та Edge.
Overflow прокручування
В iOS веб-сторінки прокручуються з імпульсом прискорення. Якщо ви швидко простягнете пальцем вгору або вниз, сторінка продовжуватиме прокручуватися після того, як приберете палець. Якщо ви досягнете верхньої або нижньої частини сторінки, він відскочить назад від кінця контейнера, перш ніж стане на місце.
На щастя, цю проблему легко вирішити:
Тепер у нас є прокручування для горизонтального контейнера. Ось приклад того, як це виглядає:
Смуги прокручування
За замовчуванням контейнер з контентом, що прокручується, матиме смуги прокручування. Але що якщо ми не хочемо додавати скролінг? Таке рішення легко реалізувати. Хоча працює воно лише у браузерах на WebKit.
Висновок
Контейнери з горизонтальною прокруткою стає все більш поширеними. Тому краще зберегти ці приклади: вони знадобляться вам у майбутньому. Можна також обернути код у медіа-запит і відобразити горизонтальне прокручування лише для певних пристроїв. І ніякого головного болю з jQuery!
HTML-блок, що прокручується
Створюємо блок з текстом, що прокручується, за допомогою CSS і HTML
HTML-блок, що прокручується, - це блок, в якому, коли його вміст більше розмірів самого блоку, праворуч і знизу з'являються смуги прокручування. Іншими словами, якщо у вас є блок, в якому може поміститися близько 50 слів, і у вас є текст, що складається з 200 слів, у прокручуваному HTML-блоці з'являться смуги прокручування, щоб ви могли бачити решту 150 слів. У стандартному HTML-блоці додатковий текст просто виходить за його межі.
Створити HTML-блок (скролл для сайту), що прокручується, досить просто.
Вам просто потрібно встановити ширину та висоту елемента, а потім використовувати властивість CSS overflow , щоб вказати поведінку елемента, коли вміст виходить за його межі.
Властивість CSS overflow hidden використовується для приховування вмісту, що виходить за межі елемента.
Що робити із додатковим текстом?
Коли текст більше, ніж може поміститися в доступний простір макета, у вас є кілька варіантів:
- Перепишіть текст, щоб він став коротшим.
- Дозвольте, щоб текст виходив за межі контейнера, і сподівайтеся, що макет може розтягуватися, щоб упоратися з цією ситуацією.
- Обріжте текст там, де він виходить за межі контейнера.
- Додайте смуги прокручування (для тексту – зазвичай вертикальні), щоб за допомогою їх можна було переглянути весь текст.
Кращим варіантом, як правило, є останній: створити текстовий блок, що прокручується. Тоді користувач зможе прочитати весь текст, а макет залишиться без змін.
HTML і CSS для цього:
overflow: auto; вказує браузеру додавати смуги прокручування (скролл), якщо текст виходить за межі блоку div.
Але для того, щоб це спрацювало, також потрібно встановити для цього блоку div властивості ширини і висоти, щоб визначити межі контейнера.
Ви також можете обрізати текст, змінивши значення якості overflow з auto на hidden . Якщо ви не вкажете властивість overflow, скролл на сайті не працюватиме, і текст виходитиме за межі блоку div.
Рядок, що біжить на сайті, може бути повідомленням або рекламним повідомленням.
Ви можете додати смуги прокручування не тільки для тексту
Якщо у вас є велике зображення, яке ви хочете відображати на меншому просторі, можна додати навколо нього смуги прокручування так само, як для тексту.
У цьому прикладі зображення розміром 400 на 509 пікселів розміщено всередині абзацу розмір якого становить 300 на 300 пікселів.
Смуги прокручування можуть використовуватися в таблицях
Довгі таблиці можуть бути дуже важкими для сприйняття, але, поміщаючи їх у блок div обмеженого розміру, а потім, додаючи властивість overflow (як спосіб зробити скролл), можна створювати таблиці з великою кількістю даних, які не займуть надто багато простору на сторінці,
Найпростіший спосіб зробити це - так само, як зображення та текст, просто оберніть таблицю в блок div, встановіть його ширину і висоту і додайте властивість overflow (скролл всередині div):
| Name |
Phone |
|---|
| Jennifer |
502-5366 |
.
Однак при цьому є один нюанс. У подібних випадках, як правило, також з'являється горизонтальний скролл, тому що браузер передбачає, що для того, щоб дати користувачеві можливість переглянути всю таблицю, потрібні дві смуги прокручування.
Існує безліч способів виправити це, наприклад, зміна ширини таблиці та деякі інші. Але я віддаю перевагу просто відключити горизонтальну прокрутку за допомогою властивості CSS3 overflow-x. Просто вкажіть для блоку div властивість overflow-x: hidden; , і горизонтальна смуга прокручування буде видалена. Обов'язково перевірте, щоб водночас у вас не зник і сам контент.
Firefox підтримує використання overflow для тегів TBODY
Одна дійсно приємна особливість браузера Firefox полягає в тому, що ви можете використовувати властивість overflow у внутрішніх тегах таблиць, таких як tbody та thead або tfoot. Це означає, що ви можете встановити смуги прокручування вмісту таблиці, а комірки заголовків залишаться прив'язаними до них.
Це працює тільки Firefox , що не дуже добре, але це корисна функція, якщо ваші читачі використовують тільки Firefox . Перегляньте наступний приклад, щоб зрозуміти, що я маю на увазі.
| Name |
Phone |
|---|
| Jennifer |
502-5366 |
.
Вадим Дворніков автор-перекладач статті « HTML Scroll Box »
