CSS свойство overflow определяет то, как будет отображаться содержимое элемента, если оно слишком большое и не помещается в заданные размеры области.
Этот текст очень длинный, а высота его контейнера всего 100px. Поэтому, чтобы пользователь мог комфортно прочитать этот текст, добавляется полоса прокрутки… Вот вам яркий пример современных тенденций — дальнейшее развитие различных форм деятельности является качественно новой ступенью экспериментов, поражающих по своей масштабности и грандиозности. Равным образом, базовый вектор развития позволяет выполнить важные задания по разработке инновационных методов управления процессами. Сложно сказать, почему многие известные личности являются только методом политического участия и рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок.
Свойство overflow определяет нужно ли обрезать контент, если он слишком большой и не помещается в заданные размеры области, или же нужно добавить полосу прокрутки для перемещения по этому контенту.
Свойство overflow может принимать следующие значения:
visible — Значение по умолчанию. Переполнение не обрезается. Контент отображается за пределами элемента.
hidden — Переполнение обрезается, не поместившаяся часть контента будет не видна.
scroll — Переполнение обрезается, для возможности просмотра не поместившейся части контента добавляется полоса прокрутки.
auto — То же, что и значение scroll, но полоса прокрутки добавляется только при необходимости.
Свойство overflow работает только с блоковыми элементами, у которых задана высота.
В системе OS X Lion (на Mac) полоса прокрутки по умолчанию скрыта и появляется только когда используется (даже если задано значение «overflow:scroll»).
overflow: visible
По умолчанию у свойства overflow установлено значение visible, что означает, что переполняющий контент не обрезается и отображается за пределами элемента контейнера:
Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.
Со значением hidden переполнение обрезается, а не поместившаяся часть контента будет скрыта:
Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.
div {
overflow: hidden;
}
overflow: scroll
При заданном значении scroll
переполнение обрезается, а внутри элемента контейнера добавляется полоса прокрутки, чтобы можно было просмотреть не поместившуюся часть контента. Обратите внимание, что будут добавлены обе полосы прокрутки — горизонтальная и вертикальная (даже если по факту они не нужны):
Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.
div {
overflow: scroll;
}
overflow: auto
Значение auto аналогично значению scroll, но при этом полосы прокрутки добавляются при необходимости:
Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.
div {
overflow: auto;
}
overflow-x и overflow-y
Свойства overflow-x и overflow-y определяют каким именно переполнением контента мы будем управлять — только горизонтальным или только вертикальным (или обоими):
overflow-x определяет, что делать с левым/правым краем контента. overflow-y определяет, что делать с верхним/нижним краем контента.
Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.
Все CSS свойства управления переполнением элемента
Свойство
Описание
overflow
Определяет, каким образом будет отображаться содержимое элемента, если оно не помещается в область вывода данного элемента
overflow-wrap
Определяет, должен ли браузер переносить длинные слова на новую строку при переполнении контейнерного элемента
overflow-x
Определяет, как будет отображаться содержимое элемента, если оно не помещается слева/справа в область вывода данного элемента
overflow-y
Определяет, как будет отображаться содержимое элемента, если оно не помещается вверху/внизу в область вывода данного элемента
CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока.
Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:
See the Pen Basic Slider by Pochemuta (@pochemuta) on CodePen.
Получился стандартный слайдер, который уже работает. Но он плох тем, что на мобильных устройствах его нельзя листать свайпом. Пользователям приходится перемещать элементы через весь экран. Это происходит из-за того, что прокрутка не учитывает содержимое просматриваемой области.
Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:
Простой прокручиваемый контейнер
Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.
See the Pen Scroll Snap by Pochemuta (@pochemuta) on CodePen.
Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.
1
Настройка направления и строгости привязки
Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).
С направлением всё просто:
горизонтальная прокрутка — x или ключевое слово inline:
вертикальная прокрутка — y или ключевое слово block;
привязка в обоих направлениях — both.
Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:
none — нет привязки к точке;
mandatory — обязательное смещение прокрутки к указанной точке;
proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.
Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.
See the Pen Scroll Snap mandatory by Pochemuta (@pochemuta) on CodePen.
Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.
2
Изменение точек привязки
Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.
Чтобы было проще понять разницу, посмотрите на этот пример:
See the Pen Scroll Snap start, center, end by Pochemuta (@pochemuta) on CodePen.
У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.
При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.
3
Управление прокруткой
Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:
normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.
Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.
4
Настройка внутреннего отступа контейнера
Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.
Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.
See the Pen Scroll Snap padding by Pochemuta (@pochemuta) on CodePen.
Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.
5
Настройка внешнего отступа элемента
Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.
See the Pen Scroll Snap margin by Pochemuta (@pochemuta) on CodePen.
Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке.
Поддержка в браузерах:
В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.
Актуальность проверяйте на сайте Can I Use.
Узнать больше:
Спецификация CSS Scroll Snap
Ещё интересные материалы про CSS и фронтенд:
Современный CSS мощнее, чем вам кажется: 12 примеров, в которых не нужен JavaScript
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Как стать фронтенд-разработчиком в 2021 году: дорожная карта
Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.
Подробнее
Реклама на tproger.ru
Загрузка
Курс «SQL-Injection Master»
Старт 10 июля, 3 месяца, онлайн, от 11 997 до 35 990 ₽ в месяц
Курс «Анализ защищенности приложений Android»
Старт 10 июля, 3 месяца, онлайн, от 16 664 до 49 990 ₽ в месяц
Читают сейчас
Свойство CSS overflow-x
❮ Пред. Следующий ❯
Свойство overflow-x указывает, должно ли содержимое быть скрытым, видимым или прокручиваться горизонтально, когда содержимое выходит за пределы левого и правого краев элемента. Это свойство является одним из свойств CSS3.
Свойство overflow-x имеет четыре основных значения: visible, scroll, auto и hidden.
Если свойство overflow-y скрыто, прокручивается или автоматически, а свойство overflow-x видимо по умолчанию, оно будет вычисляться как auto.
<голова>
Название документа
<стиль>
div.example {
цвет фона: #1c87c9;
цвет: #fff;
ширина: 40 пикселей;
переполнение-x: прокрутка;
}
<тело>
Пример свойства Overflow-x
Переполнение-x: прокрутка
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
Попробуй сам »
Результат
Пример свойства overflow-x с «видимым» значением:
<голова>
Название документа
<стиль>
div.example {
цвет фона: #1c87c9;
цвет: #cccccc;
ширина: 40 пикселей;
переполнение-x: видимое;
}
<тело>
Пример свойства Overflow-x
Переполнение-x: видимо
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
Попробуй сам »
Пример свойства overflow-x со «скрытым» значением:
<голова>
Название документа
<стиль>
div.example {
цвет фона: #1c87c9;
цвет: #fff;
ширина: 40 пикселей;
переполнение-x: скрыто;
}
<тело>
Пример свойства Overflow-x
Переполнение-x: скрыто
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
Попробуй сам »
Пример свойства overflow-x со значением «auto»:
<голова>
Название документа
<стиль>
div.example {
цвет фона: #1c87c9;
цвет: #fff;
ширина: 40 пикселей;
переполнение-х: авто;
}
<тело>
Пример свойства Overflow-x
Переполнение-x: авто
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
Попробуй сам »
Пример свойства overflow-x со всеми значениями:
<голова>
Название документа
<стиль>
div.scroll {
цвет фона: #ccc;
ширина: 50 пикселей;
переполнение-x: прокрутка;
}
div.скрытый {
цвет фона: #ccc;
ширина: 50 пикселей;
переполнение: скрыто;
}
div. auto {
цвет фона: #ccc;
ширина: 50 пикселей;
переполнение: авто;
}
div.visible {
цвет фона: #ccc;
ширина: 50 пикселей;
переполнение: видимое;
}
<тело>
Пример свойства Overflow-x
переполнение-x: прокрутка
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
переполнение-x: скрыто
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
переполнение-x: авто
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
переполнение-x: видимое
<дел>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
Попробуй сам »
Практикуйте свои знания
Какое из следующих значений не является значением свойства overflow-x?
видимый скрытый статический прокрутить
Успех!
Неверно! Ты не правильно понял!
Как это сделать хорошо
Когда вы думаете о «прокрутке» на веб-сайтах и в приложениях, в первую очередь, вероятно, приходит на ум одно направление: вниз.
В этом есть смысл — практически каждая веб-страница структурирует свое содержимое вертикально. Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Тем не менее, ориентация прокрутки почти всегда остается вертикальной.
Вертикальная прокрутка работает отлично и хорошо… но как насчет ее аналога по оси X, горизонтальной прокрутки ? Возможно, вы подумали о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше, чем вертикальная прокрутка? И как это может обогатить ваш UX?
В этом посте я отвечу на все эти вопросы, а затем покажу вам, как создать базовую горизонтальную прокрутку с помощью пользовательского HTML и CSS, если вы считаете, что это хорошо подходит для вашего сайта.
Что такое горизонтальная прокрутка?
Горизонтальная прокрутка — это метод навигации по страницам, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера. Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя пальцем вбок по трекпаду на рабочем столе или мыши с трекпадом, нажав клавиши со стрелками влево и вправо или проведя пальцем вбок по сенсорному экрану.
Другими словами, колесо прокрутки заставляет страницу перемещаться по экрану горизонтально, а не вертикально. Вот пример вертикальной прокрутки на веб-сайте фотографа:
Источник изображения
Хотя вертикальная навигация является основой подавляющего большинства веб-сайтов, горизонтальная прокрутка встречается гораздо реже. Это связано с тем, что горизонтальная прокрутка считается неэффективным и устаревшим методом пользовательского интерфейса с небольшим количеством практических применений.
Это может звучать несколько резко, поэтому давайте подробнее обсудим, почему вы, вероятно, не слишком часто прокручиваете страницу вбок.
Недостатки горизонтальной прокрутки
Мнения о горизонтальной прокрутке неоднозначны как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не слишком увлекаюсь этим по нескольким причинам:
Это нарушает ожидания пользователей.
Вертикальная прокрутка является навигационной нормой. Помимо случайных стилистических украшений, каждая веб-страница структурирует свое содержимое вертикально. Поэтому, естественно, пользователи будут ожидать прокрутки таким образом, а не слева направо.
Можно время от времени нарушать правила дизайна, чтобы добавить немного визуального чутья и пикантности. Но нарушение этого конкретного правила без четкой цели больше запутает и разочарует посетителей, чем заинтересует их. И многие просто предположат, что ваша страница/элемент страницы повреждены.
А как насчет сенсорных экранов? В то время как появление интеллектуальных мобильных технологий нормализовало жесты бокового смахивания (смотря на вас, Tinder), пользователи, естественно, прокручивают мобильный веб-сайт, если их не подсказывают. Таким образом, обычно лучше сохранять вертикальную прокрутку как на настольных, так и на мобильных сайтах.
Высокая стоимость взаимодействия.
В терминах UX стоимость взаимодействия – это количество усилий, которое требуется пользователю для выполнения действия, например взаимодействия с элементом страницы. Стоимость взаимодействия включает (1) насколько усердно мы должны думать о задаче и (2) физические усилия, необходимые для выполнения задачи.
Вертикальная прокрутка имеет низкую стоимость взаимодействия. Опять же, мы ожидаем этого, поэтому нам вряд ли нужно думать, чтобы сделать это. Вертикальная прокрутка также эргономично эффективна благодаря колесику мыши, трекпаду или клавишам со стрелками.
Горизонтальная прокрутка, напротив, имеет гораздо более высокую стоимость взаимодействия.
Мысленно мы должны приспособиться к новой ориентации прокрутки и обрабатывать контент, поступающий с нового направления экрана. Мы не привыкли к дополнительной когнитивной нагрузке, и это негативно сказывается на нашем опыте просмотра. Пользователям, которым нужна горизонтальная полоса прокрутки, также необходимо найти этот элемент, что требует дополнительной работы.
Горизонтальная прокрутка требует от пользователей больше физических усилий. Пользователи трекпада и мобильных устройств могут провести пальцем в сторону, чтобы открыть содержимое, но это невозможно для пользователей настольных компьютеров со стандартной мышью. Эти пользователи должны либо перейти к клавишам со стрелками, либо щелкнуть и перетащить полосу прокрутки.
Его легко пропустить или проигнорировать.
Эта проблема возникает из-за отсутствия ожиданий — если пользователи не знают, что на веб-странице появится горизонтальная навигация, они не будут ее искать, упустив потенциально релевантный контент.
Четкие визуальные подсказки для горизонтальной навигации, такие как значки со стрелками или информационный текст, могут частично решить эту проблему. Но есть шанс, что пользователи пропустят это. Если им случится заметить подсказки, им все равно может быть непонятно, что на самом деле представляет собой скрытый контент. В этом сценарии большинство просто не будет беспокоиться о том, чтобы взаимодействовать с контентом за пределами области просмотра.
Это создает проблемы с доступностью.
Дополнительный размер прокрутки усугубляет трудности простой вертикальной прокрутки, особенно когда они используются одновременно. Элемент страницы с горизонтальной и вертикальной прокруткой может дезориентировать, и его трудно использовать людям с двигательными нарушениями.
Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.
Когда работает горизонтальная прокрутка
Учитывая проблемы с горизонтальной прокруткой, вы можете задаться вопросом, была ли когда-нибудь такая функция полезной.
Но пока не исключайте. Есть несколько случаев, когда горизонтальная прокрутка может быть эффективной, если она реализована аккуратно и точно. Давайте теперь рассмотрим его наиболее распространенное использование:
Чтобы скрыть второстепенный контент
На любом веб-сайте вы хотите свести к минимуму количество прокруток, которые пользователи должны выполнять, чтобы добраться до нужного контента. Здесь может помочь горизонтальная прокрутка: вы можете сэкономить вертикальное пространство страницы, разместив специальный элемент, который показывает соответствующий контент из горизонтальной прокрутки.
В большинстве реализаций этого метода четко указывается функция прокрутки и предлагается альтернативный метод навигации, например нажатие кнопки, для отображения большего содержимого. Например, пользователи могут горизонтально прокручивать галерею изображений или миниатюрные ссылки на сообщения в блогах или новостные статьи.
Для отображения предложений по категориям
Кстати, контейнеры с горизонтальной прокруткой полезны для сегментации контента по категориям. Пользователи выполняют прокрутку по вертикали, чтобы найти интересующую их категорию, а затем по горизонтали, чтобы найти конкретный продукт, видео, статью или другой тип элемента в этой категории.
Сайты электронной торговли используют этот метод для разделения своего каталога на типы продуктов. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:
Источник изображения
Также обратите внимание, что в этом примере предлагается альтернатива прокрутки — кнопки со стрелками.
Для навигации по большому изображению или визуальному элементу
Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите поместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, представляют собой сложную задачу проектирования. Чтобы помочь пользователям перемещаться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.
Однако обратите внимание, что в настоящее время метод перетаскивания более распространен, чем двойная вертикальная и горизонтальная прокрутка. Пользовательское тестирование полезно для определения того, какой подход лучше всего подходит для вашего конкретного экземпляра. В любом случае, для удобства навигации по этим большим визуальным элементам также должна быть доступна клавиатура.
Рекомендации по горизонтальной навигации
Избегайте горизонтальной прокрутки на полных веб-страницах.
Включить другие методы взаимодействия.
Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
Итак, вы считаете, что на вашем сайте есть место для горизонтальной навигации? Вот несколько советов, о которых следует помнить:
1. Избегайте горизонтальной прокрутки на полных веб-страницах.
Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на полной веб-странице. Нарушение этого соглашения оттолкнет большинство пользователей.
Если вы хотите, чтобы различные разделы вашей главной страницы перемещались горизонтально, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой, как показано на этом впечатляющем веб-сайте дизайнерского агентства:
Источник изображения
В этом примере пользователь прокручивает страницу вниз. Появление СМИ справа поначалу неожиданно, но вы быстро понимаете, что происходит.
2. Включить другие способы взаимодействия.
Даже если на вашей странице используется горизонтальная прокрутка, мы рекомендуем предоставить пользователям настольных компьютеров другой способ отображения скрытого содержимого. Такую же функцию может выполнять кнопка со стрелкой:
Источник изображения
Мобильные пользователи будут меньше сталкиваться с проблемами при смахивании в сторону, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.
3. Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах. Горизонтальные полосы прокрутки должны выглядеть и функционировать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте пользовательских стилей полос прокрутки, так как они служат для помощи и не должны отвлекать фокус 9. 0003
Есть несколько исключений для размещения видимых полос прокрутки. Если на обеих сторонах контейнера есть кнопки, которые позволяют пользователям прокручивать, пользователи могут нажимать на них вместо перетаскивания полосы прокрутки. Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.
Не забудьте свести к минимуму вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки.
В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить контейнеры прокрутки таким образом, чтобы горизонтальная полоса прокрутки появлялась при наведении курсора.
Или попробуйте отобразить кусочек скрытого содержимого в прокручиваемом контейнере. Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов — обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера дисплея:
Источник изображения
Наконец, текст с инструкциями, например «Прокрутите, чтобы узнать больше», также работает. Попробуйте все эти реализации при создании прототипов и тестировании.
Как создать контейнеры с горизонтальной прокруткой в HTML и CSS
Когда элемент HTML — скажем,
— содержит содержимое, выходящее за его границы, это называется переполнением . Например, на стандартной веб-странице все содержимое ниже сгиба переполняется в окне браузера.
Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x .
Если мы присвоим значение , прокрутите до переполнения-х элемента контейнера, браузер скроет горизонтально выходящий за пределы контент и сделает его доступным с помощью горизонтальной прокрутки. Чтобы это работало, необходимо указать ширину как элемента-контейнера, так и дочернего элемента (элемента в контейнере).
Ниже рассмотрим этот метод более подробно.
Шаг 1: Используйте HTML для создания контейнера.
В этом примере я создал элемент-контейнер
шириной 500 пикселей. Внутри этого контейнера
находится дочерний элемент
с установленной шириной 1000 пикселей. Поскольку ширина
превышает ширину
, текст выходит за пределы контейнера справа.
Вот код HTML для моего примера, как показано выше:
(Ваш текст будет здесь. Кроме того, вы можете поместить другие элементы в этот родительский элемент div.