视差问题，图像高度计算错误

Question

我创建了一个视差组件，该组件允许在不同深度添加多个图层。

显然，为避免用户在图像移动较慢时看到图像的边缘，我需要相应地调整顶部位置和高度。但是看来我的计算是错误的。

请参见下面的示例，有人可以在这里帮助我完成数学吗？如您所见，第一个视差分量设置得很高，但是图像太大了。

Vue.component('parallax', {
  render: function(h) {
      return h('div', { 'class': 'parallax' }, this.$slots.default);
  },
  data: function() {
      return {
          layers: [],
          width: null,
          height: null,
          scrollFactor: null
      }
  },
  mounted() {

      const eventHandler = () => requestAnimationFrame(this.update);
      window.addEventListener('resize', eventHandler);
      window.addEventListener('scroll', eventHandler);

      this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', eventHandler);
          window.removeEventListener('scroll', eventHandler);
      });

      requestAnimationFrame(this.update);

      this.$el.querySelectorAll('[data-layer]').forEach(layer => {
          this.layers.push({
              depth: parseFloat(layer.getAttribute('data-depth')),
              el: layer
          });
      });
  },
  methods: {
      calcParallax: function() {
          const container = this.$el.getBoundingClientRect();

          this.height = container.height;
          this.width = container.width;

          const viewportOffsetBottom = window.innerHeight - container.top;
          return viewportOffsetBottom / (window.innerHeight + this.height);
      },
      update: function() {
          this.layers.forEach(layer => {

              let scrollFactor = this.calcParallax(layer);

              layer.el.style.top = `-${(this.height / 2) * (layer.depth * 2)}px`;
              layer.el.style.height = `calc(100% + ${this.height * layer.depth}px)`;

              let offset = (scrollFactor * this.height * layer.depth).toFixed(1);
              layer.el.style.transform = `translate3d(0, ${offset}px, 0)`;
          });
      }
  }
});

new Vue({ el: '#app' });

.parallax {
    overflow: hidden;
    position: relative;
}
.parallax > .overlay {
    position: relative;
    z-index: 2;
    height: 100%;
}
.parallax > .layer {
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.parallax--about {
  float: left;
  width: 100%;
  height: 500px;
}
.parallax--about > .layer--one {
  background-image: url('https://wallpapercave.com/wp/wp2592074.jpg');
}
.parallax--detail > .layer--one {
  background-image: url('http://hdqwalls.com/wallpapers/yamaha-r1-4k-w7.jpg');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p style="padding-top: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc vitae velit sodales dictum sit amet posuere lorem. Vestibulum sollicitudin velit ut sollicitudin dignissim. Nullam non nisl luctus, facilisis nibh ut, accumsan lorem. Proin bibendum augue quis quam interdum efficitur. Quisque ultricies, neque id dictum sodales, velit ex dictum lectus, vitae molestie dolor arcu in ante. Sed nec interdum sapien. Suspendisse eleifend quis erat ac tempor. Etiam ac maximus odio. Aenean nec augue vel odio aliquam dictum id ac urna. Integer nec libero lorem. Fusce ullamcorper hendrerit dolor nec interdum. Pellentesque ut ipsum tincidunt, placerat dolor nec, scelerisque neque. Suspendisse scelerisque sapien in dolor commodo, nec malesuada justo vulputate. Nunc blandit lacus et elit vulputate, at blandit lorem vulputate. Donec sed mi blandit quam molestie posuere. Quisque consectetur augue ut metus venenatis molestie.</p>

<p>Quisque in lorem non nibh consectetur pulvinar. Aliquam quis mi ac purus blandit pulvinar non sit amet augue. Vestibulum at dictum augue. Phasellus eget nisi in purus ultrices blandit. Donec gravida tellus sed elit lacinia, id consectetur nisi accumsan. Sed vitae vehicula dolor. Phasellus porta turpis ac malesuada suscipit. Nunc dapibus magna dui, ac dignissim risus facilisis a. Proin rutrum, sapien quis viverra ornare, odio lacus finibus lectus, in faucibus lorem augue eu turpis. Nullam sed facilisis ante. Nunc mi justo, condimentum id augue in, vehicula ullamcorper felis. Nunc non elit ut urna elementum mattis. Phasellus dui dolor, malesuada sed eleifend varius, elementum eu massa. Donec consequat lacinia odio.</p>

<parallax class="app parallax--about" style="height: 500px;">
    <div class="overlay">
        <h1>Example Parallax 1 - Slow</h1>
        <h2>SEO Test</h2>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu. <a href='http://www.google.com/'>Test URL</a></p>
    </div>
    <div class="layer layer--one" data-layer data-depth="2"></div>
</parallax>

<p style="padding-top: 20px;">Integer accumsan blandit mauris et semper. Sed interdum a lorem fermentum accumsan. Curabitur congue mi at elit vulputate porta. Curabitur a vestibulum mauris, eu fermentum libero. Sed et lectus mauris. Nulla dignissim libero ac lectus lobortis, et tempus sapien cursus. Proin malesuada bibendum tincidunt. Proin sit amet porttitor eros, eu interdum dolor. Curabitur facilisis sapien in odio accumsan, non elementum urna bibendum. Ut ut augue sit amet massa maximus malesuada non vel est. Pellentesque vitae elit lorem.</p>

<p>Vestibulum tellus ligula, luctus et fringilla sed, facilisis a libero. Nam efficitur eleifend interdum. Vestibulum et leo sed sem consequat interdum. Vivamus aliquam vehicula pharetra. Integer hendrerit vehicula elit at venenatis. Suspendisse placerat sem ut elit ultrices, pretium consectetur est efficitur. Integer quis vulputate sem. Quisque in lobortis erat.</p>

<p>Integer hendrerit augue sit amet ipsum porta fermentum. Aliquam efficitur, magna vel tristique cursus, ante risus fermentum quam, ac auctor ipsum neque et justo. Vivamus aliquam laoreet metus non malesuada. Phasellus eu ultrices eros. Sed commodo, nibh nec pharetra condimentum, mauris orci sodales lectus, a pulvinar diam est sed nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac consequat risus. In fringilla, urna sit amet porta tristique, dui nulla auctor arcu, eget egestas tortor massa a justo. Maecenas bibendum justo id massa bibendum sagittis. Donec volutpat vel justo vitae faucibus. In tempor suscipit erat, a porttitor sapien egestas sed.</p>

<parallax class="app parallax--detail">
    <div class="overlay">
        <h1>Example Prallax 2 - Fast</h1>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu.</p>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu.</p>
    </div>
    <div class="layer layer--one" data-layer data-depth="0.6"></div>
</parallax>

<p style="padding-top: 20px;">Integer accumsan blandit mauris et semper. Sed interdum a lorem fermentum accumsan. Curabitur congue mi at elit vulputate porta. Curabitur a vestibulum mauris, eu fermentum libero. Sed et lectus mauris. Nulla dignissim libero ac lectus lobortis, et tempus sapien cursus. Proin malesuada bibendum tincidunt. Proin sit amet porttitor eros, eu interdum dolor. Curabitur facilisis sapien in odio accumsan, non elementum urna bibendum. Ut ut augue sit amet massa maximus malesuada non vel est. Pellentesque vitae elit lorem.</p>

<p>Vestibulum tellus ligula, luctus et fringilla sed, facilisis a libero. Nam efficitur eleifend interdum. Vestibulum et leo sed sem consequat interdum. Vivamus aliquam vehicula pharetra. Integer hendrerit vehicula elit at venenatis. Suspendisse placerat sem ut elit ultrices, pretium consectetur est efficitur. Integer quis vulputate sem. Quisque in lobortis erat.</p>

<p>Integer hendrerit augue sit amet ipsum porta fermentum. Aliquam efficitur, magna vel tristique cursus, ante risus fermentum quam, ac auctor ipsum neque et justo. Vivamus aliquam laoreet metus non malesuada. Phasellus eu ultrices eros. Sed commodo, nibh nec pharetra condimentum, mauris orci sodales lectus, a pulvinar diam est sed nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac consequat risus. In fringilla, urna sit amet porta tristique, dui nulla auctor arcu, eget egestas tortor massa a justo. Maecenas bibendum justo id massa bibendum sagittis. Donec volutpat vel justo vitae faucibus. In tempor suscipit erat, a porttitor sapien egestas sed.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc vitae velit sodales dictum sit amet posuere lorem. Vestibulum sollicitudin velit ut sollicitudin dignissim. Nullam non nisl luctus, facilisis nibh ut, accumsan lorem. Proin bibendum augue quis quam interdum efficitur. Quisque ultricies, neque id dictum sodales, velit ex dictum lectus, vitae molestie dolor arcu in ante. Sed nec interdum sapien. Suspendisse eleifend quis erat ac tempor. Etiam ac maximus odio. Aenean nec augue vel odio aliquam dictum id ac urna. Integer nec libero lorem. Fusce ullamcorper hendrerit dolor nec interdum. Pellentesque ut ipsum tincidunt, placerat dolor nec, scelerisque neque. Suspendisse scelerisque sapien in dolor commodo, nec malesuada justo vulputate. Nunc blandit lacus et elit vulputate, at blandit lorem vulputate. Donec sed mi blandit quam molestie posuere. Quisque consectetur augue ut metus venenatis molestie.</p>

<p>Quisque in lorem non nibh consectetur pulvinar. Aliquam quis mi ac purus blandit pulvinar non sit amet augue. Vestibulum at dictum augue. Phasellus eget nisi in purus ultrices blandit. Donec gravida tellus sed elit lacinia, id consectetur nisi accumsan. Sed vitae vehicula dolor. Phasellus porta turpis ac malesuada suscipit. Nunc dapibus magna dui, ac dignissim risus facilisis a. Proin rutrum, sapien quis viverra ornare, odio lacus finibus lectus, in faucibus lorem augue eu turpis. Nullam sed facilisis ante. Nunc mi justo, condimentum id augue in, vehicula ullamcorper felis. Nunc non elit ut urna elementum mattis. Phasellus dui dolor, malesuada sed eleifend varius, elementum eu massa. Donec consequat lacinia odio.</p>
</div>

它也有点跳动，但这是另一个问题。