Горизонтальный скролл — трендовый прием в веб-дизайне, позволяющий компактно и эффектно презентовать кейсы портфолио, таймлайны или товарные линейки. При прокрутке страницы колесиком мыши секция фиксируется на весь экран (Sticky Viewport), а внутренние карточки плавно проезжают справа налево, после чего вертикальный скролл страницы продолжается в штатном режиме.
1 Создание секции и добавление суффикса класса
Создай новую полноэкранную секцию в редакторе Gridbox, перейди в её настройки и в поле Class Suffix добавь класс:
Class Suffix
horizontal-scroll-section2 Настройка строки и добавление класса трека
Внутри секции добавь строку (Row) с карточками контента, открой настройки строки и в поле Class Suffix пропиши класс горизонтального трека:
Class Suffix (Row)
horizontal-scroll-track3 Стилизация фиксации экрана и горизонтальной ленты (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и добавь правила фиксации вьюпорта и формирования горизонтальной цепочки:
CSS
/* Общая секция: высота определяет длительность и плавность прокрутки */.horizontal-scroll-section { position: relative; height: 400vh; box-sizing: border-box;}/* Фиксация видимой области во весь экран */.horizontal-scroll-section > .ba-section-items { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center;}/* Горизонтальный контейнер с карточками */.horizontal-scroll-section .horizontal-scroll-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: max-content !important; will-change: transform; transition: transform 0.05s linear;}/* Стили и отступы карточек внутри трека */.horizontal-scroll-section .horizontal-scroll-track > .ba-grid-column { flex-shrink: 0 !important; width: 80vw !important; max-width: 600px; margin-right: 30px;}4 Движок расчета горизонтального сдвига (JavaScript)
Перейди во вкладку Инструменты ➝ Редактор кода ➝ JavaScript и добавь скрипт синхронизации вертикального скролла с горизонтальной осью X:
JavaScript
document.addEventListener('DOMContentLoaded', () => { const section = document.querySelector('.horizontal-scroll-section'); const track = document.querySelector('.horizontal-scroll-track'); if (!section || !track) return; function handleScroll() { const sectionRect = section.getBoundingClientRect(); const sectionTop = sectionRect.top; const sectionHeight = sectionRect.height; const windowHeight = window.innerHeight; const trackWidth = track.scrollWidth; const maxTranslate = trackWidth - window.innerWidth + 80; if (sectionTop <= 0 && sectionTop >= -(sectionHeight - windowHeight)) { const progress = Math.abs(sectionTop) / (sectionHeight - windowHeight); const moveX = progress * maxTranslate; track.style.transform = `translateX(-${moveX}px)`; } else if (sectionTop > 0) { track.style.transform = 'translateX(0px)'; } else if (sectionTop < -(sectionHeight - windowHeight)) { track.style.transform = `translateX(-${maxTranslate}px)`; } } window.addEventListener('scroll', () => { requestAnimationFrame(handleScroll); }, { passive: true }); window.addEventListener('resize', handleScroll); handleScroll();});Обрати внимание:
Длительность и плавность эффекта регулируются высотой секции в CSS (height: 400vh;). Если карточек много, увеличь значение до 500vh или 600vh, чтобы скролл двигался размеренно и комфортно для чтения.