X scroll overflow: overflow-x | htmlbook.ru

Переполнение overflow

CSS свойство overflow определяет то, как будет отображаться содержимое элемента, если оно слишком большое и не помещается в заданные размеры области.

Этот текст очень длинный, а высота его контейнера всего 100px. Поэтому, чтобы пользователь мог комфортно прочитать этот текст, добавляется полоса прокрутки… Вот вам яркий пример современных тенденций — дальнейшее развитие различных форм деятельности является качественно новой ступенью экспериментов, поражающих по своей масштабности и грандиозности. Равным образом, базовый вектор развития позволяет выполнить важные задания по разработке инновационных методов управления процессами. Сложно сказать, почему многие известные личности являются только методом политического участия и рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок.

---

Свойство overflow определяет нужно ли обрезать контент, если он слишком большой и не помещается в заданные размеры области, или же нужно добавить полосу прокрутки для перемещения по этому контенту.

Свойство overflow может принимать следующие значения:

• visible — Значение по умолчанию. Переполнение не обрезается. Контент отображается за пределами элемента.
• hidden — Переполнение обрезается, не поместившаяся часть контента будет не видна.
• scroll — Переполнение обрезается, для возможности просмотра не поместившейся части контента добавляется полоса прокрутки.
• auto — То же, что и значение scroll, но полоса прокрутки добавляется только при необходимости.

Свойство overflow работает только с блоковыми элементами, у которых задана высота.

В системе OS X Lion (на Mac) полоса прокрутки по умолчанию скрыта и появляется только когда используется (даже если задано значение «overflow:scroll»).

overflow: visible

По умолчанию у свойства overflow установлено значение visible, что означает, что переполняющий контент не обрезается и отображается за пределами элемента контейнера:

Вы можете использовать свойство overflow, чтобы иметь лучший контроль над макетом сайта. Свойство overflow определяет, что будет происходить, если контент переполняет элемент контейнер.

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

overflow: hidden

Со значением 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 определяет, что будет происходить, если контент переполняет элемент контейнер.

div {
  overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
  overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}

---

Все 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.

 переполнение-x: видимое | скрытый | прокрутить | авто | начальная | наследовать; 

Пример свойства overflow-x:

 

  <голова>
    
    <стиль>
      div.example {
        цвет фона: #1c87c9;
        цвет: #fff;
        ширина: 40 пикселей;
        переполнение-x: прокрутка;
      }
    
  
  <тело>
     
Пример свойства Overflow-x
 
     
Переполнение-x: прокрутка
 
    <дел>
      Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. 
    

 

  <голова>
    
    <стиль>
      div.example {
        цвет фона: #1c87c9;
        цвет: #cccccc;
        ширина: 40 пикселей;
        переполнение-x: видимое;
      }
    
  
  <тело>
     
Пример свойства Overflow-x
 
     
Переполнение-x: видимо
 
    <дел>
      Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.