Как реализовать горизонтальную прокрутку на сайте?
Как реализовать горизонтальную прокрутку на сайте? https://embacy.webflow.io/ Вот так должна выглядеть прокрутка.
Когда докручиваешь до определенной секции - начинается прокрутка горизонтальная(при этом крутишь всегда вертикальную прокрутку, хоть колесиком, хоть правым вертикальным скролбаром). Ну а потом опять скролл идет вертикально.
Пробовал делать через section.addEventListener('wheel', (e) => {
e.preventDefault();
section.scrollLeft += e.deltaY;
})
Но это только работает, когда касаешься секции, если же пользуешься скролбаром правым, то горизонтальная прокрутка будет игнорироваться.
Вы не правильно поставили задачу.
Там всегда 1 прокрутка. Вертикальная.(Никакой горизонтальной нет)
Попробуйте загуглить как делать анимации относительно позиции скрола.
На первый взгляд, там стоят якоря, js смотрит на этот якорь, когда доходит до якоря, пеняет поведение скролла, судя по надписи, там галлерея за это отвечает, дальше когда доходит до конца галереи , начинается снова скролл вниз
Алексей Дубровин, Да, оказывается там все намного проще. Просто стоит блок высотой 4000px с черным фоном и мы его скролим долго. А контент в блоке зафиксирован к верху и при скроле двигается влево.
Спасибо. А как его встроить на сайт уже с готовыми секциями? Например на сайте есть body с 4 тегами section. Все section имеет разную высоту. Между 2 и 3 секцией надо встроить новую секцию с горизонтальным скролом. Пробовал добавить к своим секциям как у вас класс slide, но это разрушает верстку, так как слайды у вас фиксированные все
Классы first и last означают первый или последняя секция.
Класс in-up означает что предыдущий слайд при прокрутке уходит вверх
Класс out-up означает что при прокрутке текущий слайд уходит вверх
Класс in-right означает что предыдущий слайд при прокрутке уходит вправо
Класс out-right означает что при прокрутке текущий слайд уходит вправо
Класс in-left означает что предыдущий слайд при прокрутке уходит влево
Класс out-left означает что при прокрутке текущий слайд уходит влево
В целом, вертикальные слайды могут быть разного размера, но в таком случае надо отменить CSS-правило scroll-snap-type: y mandatory; для того чтобы прокрутка не останавливалась на стыках слайда.
Простой
Средний