Вертикальная и горизонтальная прокрутка — это способы навигации по веб-странице с помощью мыши, сенсорной панели или пальца. Вертикальная прокрутка используется, когда содержимое элемента превышает высоту контейнера. Горизонтальная прокрутка используется, когда содержимое внутри элемента превышает ширину контейнера. Вертикальная прокрутка позволяет пользователям перемещать веб-страницу вверх и вниз, а горизонтальная прокрутка позволяет странице двигаться влево и вправо. Tailwind CSS предоставляет служебные классы для включения вертикальной и горизонтальной прокрутки на веб-страницах.
Эта статья будет примером:
Как включить вертикальную прокрутку в Tailwind?
Чтобы включить вертикальную прокрутку в Tailwind, используйте кнопку « переполнение-у-прокрутки » служебный класс с нужным элементом в HTML-программе. Он допускает вертикальную прокрутку и всегда показывает полосы прокрутки, если только пользователь не отключил «всегда видимые» полосы прокрутки в своих системных настройках.
Синтаксис
< элемент сорт '=' 'переполнение-и-прокрутка...' > ... элемент >
Пример: включение вертикальной прокрутки
В этом примере мы создадим flex-контейнер с некоторыми flex-элементами в столбце и применим « переполнение-у-прокрутки » полезность для него:
< тело >
< див сорт '=' 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 1 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 2 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 3 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 4 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 5 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 6 див >
див >
тело >
Здесь, в родительском
- “ сгибаться » используется для настройки размеров дочерних элементов в зависимости от доступного пространства путем создания гибкого макета.
- “ flex-col » устанавливает flex-направление контейнера на столбец.
- “ переполнение-у-прокрутка ” включает вертикальную прокрутку.
- “ бг-фиолетовый-700 » устанавливает фиолетовый цвет фона контейнера.
- “ р-4 » задает 4 единицы заполнения со всех сторон контейнера.
- “ мх-14 ” применяет 14 единиц поля по оси X контейнера.
- “ мт-5 ” применяет 5 единиц поля к верхней части контейнера.
- “ ч-36 ” устанавливает высоту контейнера в 36 единиц.
В дочернем
- “ бг-желтый-400 » устанавливает желтый фон элементов сетки.
- “ р-2 » добавляет 3 единицы заполнения к содержимому внутри flex-элементов.
- “ м-2 » устанавливает отступ в 2 единицы для гибких элементов.
Выход
В приведенном выше выводе видно, что вертикальная прокрутка успешно включена.
Как включить горизонтальную прокрутку в Tailwind?
Чтобы включить горизонтальную прокрутку в Tailwind, используйте кнопку « переполнение-х-прокрутки » служебный класс с определенным элементом в программе HTML. Он включает горизонтальную прокрутку и всегда показывает полосы прокрутки, если пользователь не отключил «всегда видимые» полосы прокрутки в своих системных настройках.
Синтаксис
< элемент сорт '=' 'переполнение-x-прокрутка...' > ... элемент >
Пример: включение горизонтальной прокрутки
В этом примере мы создадим flex-контейнер с несколькими flex-элементами в строке и применим « переполнение-х-прокрутки » полезность для него:
< тело >< див сорт '=' 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 1 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 2 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 3 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 4 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 5 див >
< див сорт '=' 'бг-желтый-400 п-2 м-2' > 6 див >
див >
тело >
Здесь в родительском
Выход
Приведенный выше вывод указывает на то, что горизонтальная прокрутка была успешно включена.
Заключение
Чтобы включить вертикальную и горизонтальную прокрутку в Tailwind, переполнение-у-прокрутка ' и ' переполнение-х-прокрутки Вспомогательные классы используются соответственно. Эти утилиты применяются к нужным элементам в программе HTML, чтобы включить вертикальную и горизонтальную прокрутку и всегда отображать полосы прокрутки. В этой статье продемонстрирован метод включения вертикальной и горизонтальной прокрутки в Tailwind.