Multiple sticky sections with horizontal scrolling

Question

I'm trying to make a page with multiple sticky sections with horizontal scrolling (so when you're scrolling vertically as normal, you're forced to go through the horizontal gallery)

I'm referencing this codepen (https://codepen.io/johnhubler/pen/RwoPRBG) as my JS knowledge is very poor. But, as you can see in the codepen, it is only working in the first sticky section, and the second one stays still.

var windowWidth = window.innerWidth;

var horLength = document.querySelector(".element-wrapper").scrollWidth;
var horLength2 = document.querySelector(".element-wrapper2").scrollWidth;

var distFromTop = document.querySelector(".horizontal-section").offsetTop;
var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop;

var scrollDistance = distFromTop + horLength - windowWidth;
var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;

document.querySelector(".horizontal-section").style.height = horLength + "px";

document.querySelector(".horizontal-section2").style.height = horLength2 + "px";

window.onscroll = function(){
  var scrollTop = window.pageYOffset;
  
  if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
    document.querySelector(".element-wrapper").style.transform = "translateX(-"+(scrollTop - distFromTop)+"px)";
  }
  
  if (scrollTop >= distFromTop2 && scrollTop <= scrollDistance2) {
    document.querySelector(".element-wrapper2").style.transform = "translateX(-"+(scrollTop - distFromTop2)+"px)";
  }
}

I'm planning to add around 4 of the same sticky sections, so I'd like to know how to make it work in all of them. If there is a better alternative/resource/etc.(if possible, vanilla JS or something very easy to follow) please let me know.

Thank you

Answer 1

I made an optimized and working version of your code.

This array lists the classes of packaging elements. This way you can add as many galleries as you want by simply adding a new class to the array.

var array = ['.horizontal-section', '.horizontal-section2'];

Example:

var array = ['.horizontal-section', '.horizontal-section2'];

window.onscroll = function () {

    var windowWidth = window.innerWidth;
    var scrollTop = window.pageYOffset;

    array.forEach(el => {
        var wrap = document.querySelector(el);
        var elWrap = wrap.querySelector(".element-wrapper");

        var horLength = elWrap.scrollWidth;
        var distFromTop = wrap.offsetTop;

        var scrollDistance = distFromTop + horLength - windowWidth;

        wrap.style.height = horLength + "px";

        if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
            elWrap.style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
        }
    });

}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

.bumper {
    width: 100%;
    height: 1800px;
    background-color: #f3f3f3;
}

.horizontal-section,
.horizontal-section2 {
    padding: 100px 0;
    background-color: pink;
}

.sticky-wrapper,
.sticky-wrapper2 {
    position: sticky;
    top: 100px;
    width: 100%;
    overflow: hidden;
}

.element-wrapper,
.element-wrapper2 {
    position: relative;
    display: flex;
}

.element {
    width: 500px;
    height: 400px;
    background-color: purple;
    margin: 0 20px 0 0;
    flex-shrink: 0;
}

<div class="bumper"></div>

<div class="horizontal-section">
    <div class="sticky-wrapper">
        <div class="element-wrapper">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</div>

<div class="bumper"></div>

<div class="horizontal-section2">
    <div class="sticky-wrapper">
        <div class="element-wrapper">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</div>

<div class="bumper"></div>