窗口大小调整导致使用 requestAnimationFrame 的滚动动画上的元素未对齐答案

【问题标题】：Window resizing causes misalignment of elements on scroll animation that uses requestAnimationFrame窗口大小调整导致使用 requestAnimationFrame 的滚动动画上的元素未对齐
【发布时间】：2019-02-12 22:02:50
【问题描述】：

我正在使用 jquery.parallax-scroll.js (J.P-S)，它依赖于 window.requestAnimationFrame 来做滚动动画。我的脚本在滚动以到达并重叠位于页面下方某处的目标元素时，会在 x 轴和 y 轴上对元素的移动进行动画处理。

只要不调整窗口大小，它就可以很好地工作。调整窗口大小时，两个元素的位置都会发生变化，但已经进行动画的坐标不会发生变化，这会导致移动元素在滚动到目标时不再与目标重叠（未对齐）。调整大小后刷新页面可以纠正错位，但由于显而易见的原因，这不是一个可接受的解决方案。

使用 $(window).on('resize', handler)，我能够在调整大小时更新 DOM 中动画元素的“数据视差”属性。这些是为 J.P-S 提供起点和终点坐标以及行进距离的控制属性。但是，我无法使用更新的坐标重新启动动画。 J.P-S 确实在文档准备好时加载。我的想法是，如果我可以让 J.P-S 脚本在使用调整大小事件的窗口更新“数据-”属性后重新启动，则将使用新更新的坐标呈现新动画，并且可以纠正错位...... 这可能是正确的方法，也可能不是正确的方法，但我的想法已经不多了……J.P-S 的 API 非常有限，除了初始调用之外没有任何事件挂钩……

一个最小的、完整的和可验证的例子位于https://codepen.io/decam/pen/daKeyj。请参阅下面的 sn-p。

jquery.parallax-scroll.js 位于https://github.com/alumbo/jquery.parallax-scroll。

如何在不重新加载页面的情况下纠正窗口大小调整导致的错位？

'use strict';

$(function() {
  ScrollAnimations.init();
});

let ScrollAnimations = {
  init: function() {
    this.setAnimations();
  },

  setAnimations: function() {
    setDataPararllax();

    function setDataPararllax() {
      // Get the bullet element's top and left
      // coordinates from declared CSS
      let $bullet = $('#bullet');
      let bullet_top = parseFloat($bullet.css('top'));
      let bullet_left = parseFloat($bullet.css('left'));

      // Get the target element's relative top and
      // left coordinates
      let $target = $('#target');
      let target_top = $target.position().top;
      let target_left = $target.position().left;

      // Calculate x and y distance offsets
      let x_distance = target_left - bullet_left;
      let y_distance = target_top - bullet_top;

      // Prepare JSON objects with the controlling parameters
      // required by the jquery-Parallax-Scrolling.js script
      // to be added as data- attributes of the bullet element
      let data_consts = `"from-scroll": ${bullet_top}, "to-scroll": ${target_top - bullet_top}, "smoothness": 10`;
      let data_p_y = `{"y": ${y_distance}, ${data_consts}}`;
      let data_p_x = `{"x": ${x_distance}, ${data_consts}}`;

      // Add the data- attributes to the bullet element
      $bullet.attr({
        'data-parallax': data_p_y,
        'data-parallax2': data_p_x
      });
    }
  }
};

html,
body,
.panel {
  padding: 0;
  margin: 0;
  color: #96b38a;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 400;
}


/* Set bullet absolute position to any
  value using top and left properties */

#bullet {
  position: absolute;
  top: 50vh;
  left: 75vw;
}

#top {
  height: 120vh;
  background-color: #333333;
  text-align: center;
}

#bottom {
  height: 250vh;
  background-color: #666666;
}

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  font-size: 2em;
  color: #ddca7e;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Scroll Bullet->Target Animation</title>
</head>

<body>
  <svg id="bullet" height="10" width="10">
      <circle cx="5" cy="5" r="5" fill="white" />
    </svg>
  <div id="top" class="panel">
    <p><span>Scroll down...</span><br> Window resizing is NOT yet supported...<br> If white bullet doesn't overlap the black target after scrolling,<br>you've resized the window...<br> Refresh the browser and try again.<br> I'm currently working on a solution...
    </p>
  </div>
  <div id="bottom" class="panel">
    <svg id="target" height="10" width="10">
        <rect width="10" height="10" fill="black" />
      </svg>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/alumbo/jquery.parallax-scroll/js/jquery.parallax-scroll.js"></script>
</body>

</html>

【问题讨论】：

标签： jquery scroll jquery-plugins window-resize requestanimationframe

【解决方案1】：

我找到了一个解决方案，我正在回答我自己的问题，以防其他人将来遇到类似的事情。

J.P-S 脚本根据通过数据视差属性传递的 JSON 设置为 DOM 元素的样式设置动画。该脚本在动画中添加样式属性。

为了在调整窗口大小时使元素（及其动画）重新对齐，我在窗口调整大小事件上调用一个函数来替换数据视差属性。我从 DOM 元素中删除了整个数据视差和样式属性，而不仅仅是它们的值，并使用另一个名称和新值附加了新的数据属性。使用计数器，我创建并附加新的数据属性。例如。 data-1parallax 用于第一个调整大小事件，data-2parallax 用于第二个，依此类推。然后我调用了一个添加到 J.P-S 脚本的小函数，它替换了脚本用来获取参数和动画元素的数据属性名称。该名称将替换为在调整大小事件中生成的匹配名称（我传递了计数器值）；显然，我已经将脚本中的 data- 属性名称设为变量。

因此，我最终得到新的数据-[#] 视差属性和调整大小后计算的 JSON 值（以前的数据-[#] 视差属性已被删除），然后脚本生成具有正确值的新样式属性. 消除事件可确保每个用户调整窗口大小时我只运行一次此过程。如果有人需要更多说明或代码，请发表评论，我会提供。

我已经用更正的版本更新了 CodePen，您可以在那里演示可调整大小的脚本。请参阅问题中的 CodePen 链接。

【讨论】：