如何计算网页滚动距离实现Paper.js视图与网页滚动的同步

核心逻辑：canvas保持固定定位覆盖视口的前提下，网页内容向上滚动多少距离，Paper.js视图就向下偏移对应距离，即可保证绘制元素和下层网页内容的相对位置始终一致。

你之前直接传300给scrollBy不同步的原因是：jQuery animate的滚动是渐进式的动画过程，并非瞬间完成300px位移，单次调用scrollBy会让Paper视图直接跳转到目标位置，和网页的动画滚动过程脱节，导致视觉上不同步。

实现步骤 #

1. 基础滚动同步 #

先定义变量存储历史滚动偏移量，监听滚动容器的滚动事件，实时计算滚动增量同步给Paper.js视图：

// 初始化存储上一次滚动偏移量
let lastScrollTop = $("section.scrollable").scrollTop();

// 监听滚动容器的滚动事件
$("section.scrollable").on('scroll', () => {
  const currentScrollTop = $("section.scrollable").scrollTop();
  // 计算本次滚动的增量值
  const scrollDelta = currentScrollTop - lastScrollTop;
  // 同步滚动Paper.js视图
  project.view.scrollBy(new paper.Point(0, scrollDelta));
  // 更新历史偏移量
  lastScrollTop = currentScrollTop;
});

该方案已经可以覆盖默认滚动、拖拽滚动、滚轮滚动等所有常规滚动场景。

2. 适配动画滚动场景 #

如果使用自定义的动画滚动（比如你写的按键触发滚动动画），可以给animate增加step回调，强制逐帧同步位移，进一步保证同步精度：

$("section.scrollable").animate(
  { scrollTop: $("section.scrollable").scrollTop() + 300 },
  {
    // 每帧动画执行时同步Paper视图
    step: function(now) {
      const scrollDelta = now - lastScrollTop;
      project.view.scrollBy(new paper.Point(0, scrollDelta));
      lastScrollTop = now;
    }
  }
)

3. 边界场景处理 #

• 页面初始化完成后要重新赋值lastScrollTop，避免页面默认有滚动位置时初始偏移不一致
• 如果页面有resize逻辑，同步更新Paper.js视图尺寸即可，不需要修改滚动同步逻辑

内容的提问来源于stack exchange，提问作者Real Noob