我尝试制作带有视差的文本但失败了。代码似乎无伤大雅，似乎没有做错任何事，但滚动的外观和感觉却大错特错。

标记是这样的:

<!-- content above -->
<section class="section-parallax">
  <div class="container text-center">
    <div class="flex-row-columns">
      <div class="flex-row">
        <h2 class="heading flex-8">
          <span class="heading-sub">Some Header</span>
          <span class="heading-bottom">getting also long<sup>
        </h2>
      </div>
    </div>
  </div>
</section>
<!-- content below -->

像这样的样式:

.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 1400px;
}

.text-center {
  text-align: center;
}

.section-parallax {
  background: black;
  overflow: hidden;

  &,
  & .container,
  & .flex-row {
    min-height: 545px;
  }

  & .container {
    transform: translate3d(0, -100%, 0);
  }
}

.flex-row-columns {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.flex-row {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: -15px;
  margin-right: -15px;
}

.flex-8 {
  flex-basis: 66.66666666666667%;
  padding-left: 15px;
  padding-right: 15px;
}

.heading {
  color: white;
  font-size: 54px;
  letter-spacing: .66px;
  line-height: 1.273em;
}

.heading-sub {
  display: block;
  margin-bottom: 20px;
}

最后我用的JS是这样的:

class ParallaxSection {
  constructor() {
    this.el = document.querySelector('.section-parallax');
    this.els = {
      container: this.el.querySelector('.container')
    };
    this.calcBounds();

    window.addEventListener('scroll', this.onScroll.bind(this));
    window.addEventListener('resize', () => {
      this.calcBounds();
      this.onScroll();
    });
  }

  calcBounds() {
    if (this.tween) {
      this.tween.kill();
      this.els.container.removeAttribute('style');
    }

    const rect = this.el.getBoundingClientRect();
    const scrollY = ParallaxSection.getScroll();

    this.start = (rect.top + scrollY) - (window.innerHeight * 0.75);
    this.end = this.start + this.el.offsetHeight + window.innerHeight;
    this.tween = TweenLite.fromTo(this.els.container, 1, {
      css: {
        force3D: true,
        y: -this.el.offsetHeight
      }
    }, {
      paused: true,
      css: {
        force3D: true,
        y: this.end - this.start - this.el.offsetHeight
      },
      ease: Linear.easeNone
    });
  }

  onScroll() {
    const scroll = ParallaxSection.getScroll();

    if (scroll >= this.start && scroll <= this.end) {
      const diff = this.end - this.start;
      const offset = scroll - this.start;
      const perc = offset / diff;
      this.tween.progress(perc);
    }
  }

  static getScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
}

const p = new ParallaxSection();

现在，奇怪的是，在尝试发现问题时，我将其放入笔中，这样我就可以尝试查看它在哪里失败，并且在笔中看起来还不错。这导致我删除了我页面上的所有元素并完全复制了笔，事实证明，由于某种未知原因，效果在 codepen 上是完美的，但在 codepen 上却失败了。

我已经下载了 codepen 生成的整个 HTML，它也有同样的经历。

Pen在这里可以看到。

这是怎么回事？

最佳答案

我认为问题来自尝试在每个滚动像素上执行逻辑。也许你可以通过使用来解决这个问题:

• passive event listeners
• debouncing the event handler on scroll

关于javascript - 带有 GSAP 的 Janky 视差文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43002948/