Horizontal Scroll (Pause) Carousel

Question

I found this amazing "Pause Scroll (Horizontal) Parallax" by Khaled on Codepen.

What I have been trying to figure out is how would I get it to run multiple times. It seems that as soon as you apply it twice or more then the duplicates doesn't work, but the only the first one. I have tried out different things and researched about about a script running multiple times on the same page, but I haven't been able to find an answer that work.

Here is a duplicate of the first link, where I just applied the same HTML 3 times. If anyone can help me adjust the JS for this, then I would truly appreciate it.

HTML

<div class="bumper">
  <h2>There should be a horizontal scroll area just below</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>

CSS

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.bumper {
  text-align: center;
  padding: 128px 16px;
  background-color: #efefef;
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.space-holder {
  position: relative;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.horizontal {
  position: absolute;
  height: 100%;
  will-change: transform;
}

.cards {
  position: relative;
  height: 100%;
  padding: 0 0 0 150px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.sample-card {
  position: relative;
  height: 300px;
  width: 500px;
  background-color: #111f30;
  margin-right: 75px;
  flex-shrink: 0;
}

JS

const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;

function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;
  return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}

window.addEventListener('scroll', () => {
  const sticky = document.querySelector('.sticky');
  horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});

window.addEventListener('resize', () => {
  spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});

Answer 1

I have redone the js code using forEach() method.

And when you refer to a collection, you need to use a reference in the form of querySelectorAll.

const spaceHolder = document.querySelectorAll('.space-holder');
const horizontal = document.querySelectorAll('.horizontal');
const container = document.querySelectorAll('.container');
const sticky = document.querySelectorAll('.sticky');

function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;
  return objectWidth - vw + vh + 150;
}

container.forEach(function(current, i) {
  spaceHolder[i].style.height = `${calcDynamicHeight(horizontal[i])}px`;
    window.addEventListener('scroll', () => { 
      horizontal[i].style.transform = `translateX(-${sticky[i].offsetTop}px)`;
    });
    window.addEventListener('resize', () => {
      spaceHolder[i].style.height = `${calcDynamicHeight(horizontal[i])}px`;
    });
});

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.bumper {
  text-align: center;
  padding: 128px 16px;
  background-color: #efefef;
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.space-holder {
  position: relative;
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.horizontal {
  position: absolute;
  height: 100%;
  will-change: transform;
}

.cards {
  position: relative;
  height: 100%;
  padding: 0 0 0 150px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.sample-card {
  position: relative;
  height: 300px;
  width: 500px;
  background-color: #111f30;
  margin-right: 75px;
  flex-shrink: 0;
}

<div class="bumper">
  <h2>There should be a horizontal scroll area just below</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>

<section class="container">
  <div class="space-holder">
    <div class="sticky">
      <div class="horizontal">
        <section role="feed" class="cards">
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
          <article class="sample-card"></article>
        </section>
      </div>
    </div>
  </div>
</section>

<div class="bumper">
  <h2>Scroll up to see a horizontal scroll section</h2>
</div>