перевернуть скролл при прокрутке

Question

Нужен совет как сделать что бы при обычной прокрутке страницы ( колёсиком, или в моб пальцем) после того как блок докрутился до верху екрана, он стал скролиться по горизонтале и после того как достигнут край блока продолжился стандартный скролл, соответственно если скролл вверх идёт то всё в обратном порядке. (Таких блоков на странице может быть несколько)

<div class="simple"></div>
<div class="outer">
    <div class="inner">
        <div class="cube">1</div>
        <div class="cube">2</div>
        <div class="cube">3</div>
        <div class="cube">4</div>
        <div class="cube">5</div>
        <div class="cube">6</div>
        <div class="cube">7</div>
        <div class="cube">8</div>
        <div class="cube">9</div>
        <div class="cube">10</div>
    </div>
</div>
<div class="simple2"></div>
<div class="simple3"></div>

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    overflow-x: hidden;
}

.simple {
    height: 100vh;
    background: #1f69c0;
    border-bottom: 2px solid #777;
}


.simple2 {
    height: 400px;
    background: #EEAA07;
    border-bottom: 2px solid #777;
}
.simple3 {
    height: 400px;
    background: #07eed9;
    border-bottom: 2px solid #777;
}

.outer {
    height: 150px;
    background: #7b8e39;
    overflow-y: hidden;
    overflow-x: scroll;
}

.inner {
    height: 100%;
    margin: 0 100px;
    display: flex;
}

.fixed {
    position: fixed;
    top: 0;
}

.cube {
    min-width: 200px;
    height: 100px;
    background: #f6f6f6;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Вот примерная структура, пока 2 блок не проскролился до конца, 3 блок должен быть виден и после того как 2 доскролился по горизонтали до конца, продолжиться стандартный скролл

Answer 1

Такой принцип можно попробовать.

    let outer = document.querySelector('.outer')
    let inner = document.querySelector('.inner')
    window.addEventListener('scroll', function() {
        if (outer.offsetTop <= window.scrollY)
        {
            if (!inner.classList.contains('fixed')) inner.classList.add('fixed')
            inner.style.transform = `translateX(-${pageYOffset-outer.offsetTop}px)`
        }
        if (outer.offsetTop >= window.scrollY) inner.classList.remove('fixed')
    })

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    overflow-x: hidden;
}

.simple {
    min-height: 50vh;
    background: #1f69c0;
    border-bottom: 2px solid #777;
}

.outer {
    height: 200vw;
    background: #7b8e39;
}

.inner {
    width: 200vw;
    min-height: 100%;
    display: flex;
    overflow: hidden;
}

.fixed {
    position: fixed;
    top: 0;
}

.cube {
    width: 40vh;
    height: 30vh;
    background: #f6f6f6;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="simple"></div>
<div class="outer">
    <div class="inner">
        <div class="cube">1</div>
        <div class="cube">2</div>
        <div class="cube">3</div>
        <div class="cube">4</div>
        <div class="cube">5</div>
        <div class="cube">6</div>
        <div class="cube">7</div>
        <div class="cube">8</div>
        <div class="cube">9</div>
        <div class="cube">10</div>
    </div>
</div>
<div class="simple"></div>

БЛОГ НА HUSL

перевернуть скролл при прокрутке

Ответы (1 шт):