Canvas 和页面内容不同步滚动？解决这个问题的终极指南

2024-03-13 12:28:57

Canvas 与页面内容同步滚动：解决不同步问题的终极指南

导语：
你在 Three.js 中使用 Canvas 创建引人入胜的 3D 可视化时，有没有遇到 Canvas 和页面内容不同步滚动的令人沮丧的问题？别担心，这篇文章将深入探讨这个问题，并提供分步指南和代码示例，帮助你实现两者之间的同步滚动。

问题：
Canvas 与页面内容不同步滚动的问题根源于它们是独立的 DOM 元素，拥有各自的滚动条。在 Canvas 中滚动不会影响页面内容，反之亦然。

解决方案：
为了解决这个问题，我们需要建立 Canvas 和页面内容之间的桥梁，协调它们的滚动行为：

监听 Canvas 滚动事件： 添加一个滚动事件监听器，在滚动发生时捕获它。
获取 Canvas 滚动位置： 在处理程序中，获取当前滚动位置。
设置页面内容滚动位置： 使用 window.scrollTo() 方法，将页面内容的滚动位置设置为与 Canvas 相同。
反之亦然： 在页面内容滚动时，更新 Canvas 的滚动位置。

代码示例：
以下代码演示了如何实现同步滚动：

<div id="container">
  <canvas id="canvas"></canvas>
  <div class="content">
    <!-- 页面内容 -->
  </div>
</div>

const canvas = document.getElementById('canvas');
const content = document.querySelector('.content');

canvas.addEventListener('scroll', () => {
  const canvasScrollTop = canvas.scrollTop;
  window.scrollTo({
    top: canvasScrollTop,
    behavior: 'smooth'
  });
});

content.addEventListener('scroll', () => {
  const contentScrollTop = content.scrollTop;
  canvas.scrollTo({
    top: contentScrollTop,
    behavior: 'smooth'
  });
});