Как сделать горизонтальный скорл секции?

Question

[ArchiBulbash]

Всем привет

На странице есть 6 секций из них 3 содержат карточки к примеру(картинки, картинки, картинки) карточек может быть сколько угодно все они размещены горизонтально
разместил я их с помощью display:flex

Как сделать так чтобы при скроле страницы когда секция с карточками в центре экрана (или в видимой области экрана) скролилась секция с карточками горизонтально когда скрол дойдёт до конца секции скрол продолжился вертикально
то-есть скролю в низ до первой секции с карточками скрол начинает скролить влево если скролю вверх то карточки скролятся вправо

Спасибо

Comments

[Алексей]

Слушать событие мыши при скроле и менять поведение страницы так как Вам нужно.

[Сергей delphinpro]

Кажется я вам уже отвечал. Или вопрос один-в-один такой же.
Кратко: слушаем onscroll страницы, отслеживаем попадание секции во вьюпорт.
слушаем на секции onwheel, блочим его и меняем scrollLeft у секции/

[ArchiBulbash]

Сергей delphinpro, вряд ли вы мне отвечали, я тут впервые =)

на данный момент у меня так

$(function () {
    let scroll_list = $('.block-scroll-left-right'); //секции

    let top = 0; // позиция скрола вертикального
    let scroll = 0; // позиция скрола в секции
    let step = 10; // шаг забил в ручную
    let t = false;
    $(window).scroll(function (e) {
        for (let i = 0; i < scroll_list.length; i++) {
            if ($(scroll_list[i])[0].offsetTop - document.documentElement.scrollTop < document.documentElement.clientHeight / 2 - 300 && $(scroll_list[i])[0].offsetTop - document.documentElement.scrollTop > 0) {
                if (!t) {
                    top = document.documentElement.scrollTop;
                    t = true;
                }
                scroll=scroll+step
                $(scroll_list[i]).css('left', scroll * -1 + 'px')
            }
        }
        if (t) {
            document.documentElement.scrollTop = top
        }
        console.log(document.documentElement.scrollTop)
    })
});

Answer 1

[lukoie]

А что Вам мешает взять готовое решение? scroller.js например?