Question

我在 Codepen 上发现了 Khaled 创作的这个惊人的“Pause Scroll (Horizontal) Parallax”。

我一直在想的是如何让它多次运行。似乎只要您应用两次或更多次，重复项就不起作用，但只有第一个。我尝试了不同的方法并研究了在同一页面上多次运行的脚本，但我一直无法找到有效的答案。

这是一个 duplicate of the first link，我只应用了 3 次相同的 HTML。如果有人可以帮助我为此调整 JS，那么我将不胜感激。

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

我已经使用 forEach() 方法重做了 js 代码。

当你引用一个集合时，你需要使用 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>

水平滚动（暂停）轮播

1 个答案: