Как создать горизонтально прокручиваемые контейнеры

Горизонтальные контейнеры позволяют компактно размещать контент и делают интерфейс более интерактивным. С минимальным кодом можно настроить плавную прокрутку, которая одинаково удобно работает на всех устройствах.

Вы освоите создание таких блоков с помощью Flexbox и overflow, а также научитесь оформлять полосы прокрутки так, чтобы интерфейс выглядел современно и был удобен пользователям. Вы сможете применять эти приемы на практике, делая сайт визуально привлекательным и функциональным.

Обновлено: 2024-02-15 18:10:13 Вадим Дворниковавтор материала

Метод пустого пространства

Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}

Для контейнера нужно отключить вертикальную прокрутку (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 веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:

Полосы прокрутки

По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.

.scrolling-wrapper {
&::-webkit-scrollbar {
    display: none;
  }
}

Заключение

Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!

Вадим Дворниковавтор-переводчик статьи «How To Create Horizontal Scrolling Containers»