Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка (пауза) Карусель

Горизонтальная прокрутка (пауза) Карусель

#html #jquery #css #sticky #horizontal-scrolling

#HTML #jquery #css #липкий #горизонтальная прокрутка

Вопрос:

Я нашел этот удивительный «Параллакс прокрутки паузы (горизонтальный)» Халеда на Codepen.

Что я пытался выяснить, так это то, как мне заставить его запускаться несколько раз. Кажется, что как только вы применяете его дважды или более, дубликаты не работают, но только первый. Я пробовал разные вещи и исследовал сценарий, выполняемый несколько раз на одной и той же странице, но я не смог найти ответ, который работает.

Вот дубликат первой ссылки, где я только что применил один и тот же HTML 3 раза. Если кто-нибудь может помочь мне настроить 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`;
});

Ответ №1:

Я переделал код js с помощью forEach() метода.

И когда вы ссылаетесь на коллекцию, вам нужно использовать ссылку в виде 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>