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

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

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

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

Правило выбора простое и проверяемое. Если посетителю нужно прочитать больше двух абзацев подряд или заполнить форму, этот участок оставляйте вертикальным. Если он сравнивает несколько равноправных карточек, горизонтальная лента допустима. Смежные варианты с якорями и кнопкой наверх разобраны в инструкции по прокрутке сайта, а полноэкранные секции без движения вбок есть в разборе сайта на весь экран.

Не прячьте важную кнопку, цену или форму за обязательным движением вправо. Критический путь должен быть виден при обычной вертикальной прокрутке или доступен из явного меню.

Подготовьте понятную структуру экранов

Для первого прототипа хватит четырёх секций: обложка, проекты или преимущества, доказательство, действие. Каждая секция должна иметь короткий заголовок и собственную ссылку-якорь. Так человек сможет перейти к нужному месту, даже если не догадается провести пальцем в сторону.

1. Запишите одно действие посетителя: посмотреть работы, сравнить варианты или открыть карточку.
2. Сократите маршрут до четырёх-шести секций. Длинный текст вынесите на обычную вертикальную страницу.
3. Дайте каждой секции уникальный id, а в начале добавьте навигацию со ссылками вида href="#projects".
4. Поставьте форму или основную кнопку вне скрытой части ленты либо продублируйте её после ленты.
5. Соберите вертикальный запасной вид для экранов уже 768 пикселей.

Не начинайте с анимации. Сначала разложите блоки в правильном порядке и проверьте ссылки между ними. Если нужна общая карта страницы, используйте гайд по разделам сайта.

Соберите горизонтальную ленту на HTML и CSS

Контейнеру нужен display: flex, горизонтальное переполнение и ограниченная ширина дочерних секций. Свойство overflow-x определяет, что происходит с содержимым за правой границей контейнера. Значение auto добавляет прокрутку только при переполнении, что соответствует справке MDN по overflow-x.

<main class="rail" aria-label="Проекты">
  <section id="intro" class="panel"><h1>Портфолио</h1></section>
  <section id="projects" class="panel"><h2>Проекты</h2></section>
  <section id="contact" class="panel"><h2>Контакты</h2></section>
</main>

.rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.panel {
  flex: 0 0 100%; box-sizing: border-box;
  min-width: 0;
  scroll-snap-align: start;
  padding: clamp(24px, 5vw, 72px);
}
@media (max-width: 768px) {
  .rail { display: block; overflow: visible; }
  .panel { min-height: auto; }
}

Режим scroll-snap-type: x proximity мягко доводит ближайшую секцию до края, но не удерживает посетителя внутри слишком высокого блока. В официальном руководстве MDN по Scroll Snap отдельно предупреждают, что жёсткий режим mandatory может сделать часть переполненного содержимого недоступной. Для текстовых секций используйте proximity, а mandatory оставьте для коротких карточек одинаковой высоты.

По теме: Как сделать cookies на сайте: безопасная схема в 2026

Добавьте видимое управление, а не только жест

Горизонтальный жест очевиден не всем, а колесо мыши обычно двигает страницу вниз. Покажите часть следующей карточки, добавьте подпись «Листайте в сторону» и две кнопки со смысловыми названиями. Кнопки должны переводить фокус и прокрутку к соседней секции, а ссылки-якоря должны работать без JavaScript.

• У кнопок есть текст Назад и Вперёд, а не только стрелки без подписи.
• Активный раздел отражён в навигации, но цвет не является единственным признаком.
• Каждая интерактивная карточка достижима клавишей Tab.
• После перехода фокус не пропадает за пределами видимой области.
• При отключённом JavaScript контент остаётся в документе и читается сверху вниз.

Если управление выглядит как обычные ссылки, используйте ссылки. Кнопка нужна только для действия, которое меняет состояние на текущей странице. Такое разделение упрощает проверку и не ломает открытие секции в новой вкладке.

Сделайте мобильный запасной вариант

Полноэкранная лента вбок часто заставляет читать строки и одновременно двигать страницу в двух направлениях. Критерий Reflow WCAG 2.2 требует, чтобы содержимое при узком представлении не теряло функции и обычно не требовало прокрутки в двух измерениях. Исключения допустимы для частей, которым двумерная раскладка нужна по смыслу, это описано в пояснении W3C к критерию 1.4.10.

Практический выход: до 768 пикселей переключайте общую ленту на display: block. Небольшую карусель карточек можно оставить горизонтальной, если сама страница продолжает двигаться вниз, а каждая карточка целиком помещается по высоте. Не блокируйте touch-action без необходимости и не скрывайте полосу прокрутки до проверки на реальном телефоне.

По теме: Анализ сайта с помощью ИИ: проверка по данным в 2026

Проверьте результат по матрице устройств

Проверка нужна до публикации. Откройте одну и ту же страницу на широком экране, телефоне и при увеличении браузера. Смотрите не на красоту перехода, а на достижимость каждого блока и основной кнопки.

1. На ноутбуке пройдите страницу мышью, трекпадом и клавиатурой Tab.
2. На телефоне проведите пальцем вправо и влево, затем поверните экран.
3. Установите ширину окна 320 пикселей: текст не должен уходить под край.
4. Увеличьте страницу до 400 процентов: абзац читается без постоянного движения вбок.
5. Отключите JavaScript: ссылки-якоря и содержание остаются доступными.
6. Проверьте главную кнопку: до неё можно добраться без угадывания жеста.

Для итоговой редактуры пригодится чек-лист читаемого сайта: он помогает поймать слишком длинные строки, слабый контраст и потерянный фокус.

Диагностика частых сбоев

Вся страница случайно едет вправо. Найдите элемент шире окна. Частые причины: width: 100vw внутри блока с отступами, длинная ссылка без переноса или картинка без max-width: 100%. Не лечите причину глобальным overflow-x: hidden, иначе можно просто спрятать важный элемент.

Колесо мыши не двигает ленту. Это ожидаемо для многих устройств. Не перехватывайте вертикальное колесо сложным скриптом. Добавьте кнопки, якоря и обычный вертикальный вид там, где жест неочевиден.

Секция застревает между экранами. Проверьте flex-basis, внутренние отступы и box-sizing: border-box. Затем временно выключите Scroll Snap. Если проблема исчезла, смените mandatory на proximity.

На телефоне невозможно прокрутить текст вниз. Секция выше экрана, а жёсткая привязка возвращает её к началу. Отключите горизонтальный режим на узком экране или уберите обязательную фиксацию.

Частые вопросы

Можно сделать горизонтальный сайт без JavaScript?

Да. Для самой ленты достаточно Flexbox, overflow-x и Scroll Snap. JavaScript нужен только для дополнительной навигации и синхронизации состояния.

Нужна ли горизонтальная прокрутка на всём сайте?

Обычно нет. Для сайта услуг, блога и магазина оставьте основной поток вертикальным, а вбок двигайте только портфолио или ряд карточек.

Почему горизонтальная лента дёргается?

Чаще всего размеры карточек меняются после загрузки картинок или шрифтов. Задайте изображениям размеры, проверьте ширину секций и используйте мягкую привязку proximity.

Как объяснить такую страницу нейросети?

Опишите структуру, мобильный запасной вид и проверку: «Сделай горизонтальную ленту из четырёх секций на экране шире 768 пикселей, на телефоне перестрой секции вертикально, добавь якоря и не скрывай фокус клавиатуры».