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

Question

[Oooopps]

Я хочу что бы при появлении определенного (реакт) компонента scroll страницы переходил из вертикального ореинтира в горизонтальный. Грубо говоря когда скроллим страницу до определенного блока, продолжая скроллить, страница стоит на месте, а скроллится какой-то горизонтальный компонент (например слайдер). Мне нужно не готовое решение, а лишь идеи как это реализовать (желательно даже нативно, а не библиотекой)
Референс: https://www.bar-loft.com/ поскрольте до блока "наша философия"

Comments

[AgentSmith72]

// Горизонтальный скрол вкладок колёсиком мышки

let sliderTabs = document.querySelector('.slider__tabs');

sliderTabs.addEventListener('wheel', function(event) {

    event.preventDefault();

    // 120 длина вкладки, выходящей за пределы экрана.

    if(sliderTabs.scrollLeft === 0) sliderTabs.scrollLeft += 120;   
    else sliderTabs.scrollLeft -= 120;
});

// Автоскрол при нажатии на вкладки

let tabs = document.querySelectorAll('.slider__tab');

tabs.forEach((item) => {
    item.onclick = function() {
        if(item.textContent == 'Вкладка за пределами экрана') {
            sliderTabs.scrollLeft += 120
        }
        if(item.textContent == 'Первая вкладка') {
            sliderTabs.scrollLeft -= 120
        }
    };
});

Answer 1

[Big_Trouble]

1) Вешаем на окно обработчик на событие scroll.
2). При каждом скроле проверяем находиться ли блок, который должен скролиться горизонтально в пределах окна браузера
3) Если да - блокируем на время возможность скрола, а блок который должен скролиться горизонтально сдвигаем с помощью translateX на определенное количество пикселей, в зависимости от того в какую сторону мы крутим колесико мыши.
4) При каждом скроле(горизонтальном) проверяем прошел ли этот html элемент необходимую нам длину
5) Если да, запускаем вертикальный скрол

Почитать можно здесь:
https://developer.mozilla.org/en-US/docs/Web/API/E...
https://developer.mozilla.org/en-US/docs/Web/API/I...
https://developer.mozilla.org/en-US/docs/Web/API/E...
https://developer.mozilla.org/en-US/docs/Web/API/D...