水平滚动不适用于GSAP滚动触发器中的一个滚动

问题描述

我正在使用GSAP产品滚动触发器。我正在做的是，一旦用户滚动，然后我必须在一个滚动中从下到上滚动下一节。直到第六部分出现在视口上为止。

第六部分一旦出现，我就必须水平滚动他的行。一旦完成所有行，然后从下到上再次开始扩孔部分。

我正在共享下面的代码笔链接here。我的垂直问题已解决，但我正在水平行问题。我的意思是水平滚动条不能与一个滚动条一起使用，我有5行，但我要进入4行。

您也可以在此处查看代码段

gsap.registerPlugin(ScrollTrigger);

function goToSection(i,anim) {
  gsap.to(window,{
    scrollTo: {
      y: i * innerHeight,autoKill: false
    },duration: 1
  });

  if (anim) {
    anim.restart();
  }
}

gsap.utils.toArray(".panel").forEach((panel,i) => {
  ScrollTrigger.create({
    trigger: panel,onEnter: () => goToSection(i)
  });

  ScrollTrigger.create({
    trigger: panel,start: "bottom bottom",onEnterBack: () => goToSection(i),});
});



let sections = gsap.utils.toArray(".rows");
gsap.to(sections,{
  xPercent: -100 * (sections.length - 1),ease: "none",scrollTrigger: {
    trigger: ".pinme",pin: true,scrub: 1,// snap: 1 / (sections.length - 1),// base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".pinme").offsetWidth
  }
});

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Signika Negative",sans-serif,Arial;
}

.blue {
  background-color: blue
}

.red {
  background-color: #f00;
}

.orange {
  background-color: orange;
}

.purple {
  background-color: purple
}

.green {
  background-color: green
}

.gray {
  background-color: gray
}

.panel {
  height: 100vh;
  position: sticky;
  top: 0;
}

h2 {
  font-size: 50px;
  color: #fff;
  padding: 0;
  margin: 0;
}

.rows {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.pinme {
  width: 700%;
  height: 100%;
  display: flex;
  flex-wrap: Nowrap;
}

.sixth {
  width: 100% !important
}

<div class="description panel blue">
  <h2>Scroll Down</h2>
</div>

<section class="panel red">
  <h2>ONE</h2>
</section>
<section class="panel orange">
  <h2>TWO</h2>
</section>
<section class="panel purple">
  <h2>THREE</h2>
</section>
<section class="panel green">
  <h2>FOUR</h2>
</section>

<section class="panel red">
  <h2>five</h2>
</section>

<section class="panel purple pinme">
  <div class="sixth">
    <h2>Six</h2>
  </div>

  <div class="rows rows1">
    <h2>Rows One</h2>
  </div>
  <div class="rows rows2">
    <h2>Rows Two</h2>
  </div>
  <div class="rows rows3">
    <h2>Rows Three</h2>
  </div>
  <div class="rows rows4">
    <h2>Rows Four</h2>
  </div>
  <div class="rows rows5">
    <h2>Rows Five</h2>
  </div>

</section>

<section class="panel blue unpinme">
  <h2>seven</h2>
</section>

<section class="panel red">
  <h2>Eight</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）