В этой статье демонстрируется метод предотвращения переполнения содержимого и включения прокрутки с помощью CSS.
Как остановить переполнение контента и включить прокрутку?
Цель предотвращения переполнения содержимого заключается в том, чтобы содержимое помещалось в контейнер и не оказывало негативного влияния на производительность веб-сайта. Он может легко понять контекст и может улучшить доступность для пользователей. Для подробного объяснения давайте обсудим на примере:
Шаг 1. Включите прокрутку с переполнением содержимого
Первоначально начните с создания таблицы внутри HTML-файла, к которой будет применяться эффект прокрутки. Допустим, таблица уже создана, состоит из шести строк и семи столбцов, и в таблицу предоставлены какие-то фиктивные данные:
< стол >
< тр >
< й > Глава 1 < / й >
< й > Глава 2 < / й >
< й > Глава 3 < / й >
< й > Глава 4 < / й >
< й > Глава 5 < / й >
< й > Глава 6 < / й >
< й > Глава 7 < / й >
< / тр >
< тр >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< тд > Ряд 1 < / тд >
< / тр >
< тр >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< тд > Ряд 2 < / тд >
< / тр >
< тр >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< тд > Ряд 3 < / тд >
< / тр >
< тр >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< тд > Ряд 4 < / тд >
< / тр >< тр >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< тд > Ряд 5 < / тд >
< / тр >
< тр >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< тд > Ряд 6 < / тд >
< / тр >
< / стол >
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вывод показывает, что данные таблицы представлены в менее читаемом формате, и таблица занимает много места.
Шаг 2: Настройка эффекта переполнения и прокрутки
После этого оберните таблицу родителем» <дел> » и присвойте ему класс « переполнение ». Затем присвойте этому элементу div следующие свойства CSS:
.переполнение {
ширина : 200 пикселей ;
высота : 200 пикселей ;
переполнение-х : авто ;
переполнение-y : авто ;
поведение прокрутки : гладкий ;
}
В приведенном выше фрагменте кода:
- Во-первых, значение «200px» предоставляется как для CSS « ширина ' и ' высота ' характеристики. Он устанавливает размер таблицы, которая будет отображаться на веб-странице.
- Далее используйте « переполнение-х ' и ' переполнение-y », чтобы включить прокрутку и установить « авто ” по осям X и Y.
- В конце установите значение « гладкий ' к ' поведение прокрутки », чтобы обеспечить беспрепятственный пользовательский опыт.
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Веб-страница показывает, что таблица теперь занимает меньше места и предотвращает переполнение контента. Кроме того, был включен эффект прокрутки.
Примечание : Установив ' переполнение: авто ' или ' переполнение: прокрутка », пользователи могут включить прокрутку для переполнения содержимого. В дополнение ' переполнение: скрыто ” можно использовать для полного предотвращения переполнения.
Заключение
Свойства «overflow-x» и «overflow-y» используются для управления переполнением и включения прокрутки по горизонтальной и вертикальной оси. Он предотвращает переполнение контента и позволяет прокручивать страницу, чтобы создать интерактивный адаптивный дизайн для всех устройств. В этой статье показано, как предотвратить переполнение содержимого и включить прокрутку с помощью CSS.