使用window.scrollY进行画布计算会导致问题

Question

出于各种原因，我一直试图使用HTML5画布制作视差效果。我一直在使用window.scrollY属性来确定用户滚动的距离，因此可以使用此值计算转换。

我认为最好通过an example来解释：

function draw() {
  scrollOffset = window.scrollY;

  ctx.clearRect(0, 0, width, height);

  ctx.fillStyle = "#000";
  ctx.fillRect((width/2) - (size/2), ((height/2) - (size/2)) + scrollOffset, size, size);

  requestAnimationFrame(draw);
}

正如您所看到的，根据您使用的浏览器，会出现不同程度的＆＃34;毛刺＆＃34;你滚动造成的。中心的广场应该始终保持在同一个地方，但是跟上用户滚动的距离存在问题。

这个问题有多明显取决于您使用的浏览器;只有当您快速连续更改滚动方向时，Chrome才会显而易见，而无论您滚动的速度有多慢，Firefox和Edge都会引人注目。

有没有更好的方法来解决这个问题？

Answer 1

  

注意：不是解决方案，而是建议

只有在页面上滚动时才会发生视差。应该像下面的代码片段一样：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let width;
let height;

window.addEventListener("resize", resizeCanvas);

function resizeCanvas() {
  width = canvas.width = document.documentElement.clientWidth;
  height = canvas.height = document.documentElement.clientHeight;
}

resizeCanvas();

let scrollOffset;
let size = 50;

function draw() {
  scrollOffset = window.scrollY;  
  ctx.clearRect(0, 0, width, height);  
  ctx.fillStyle = "#000";
  ctx.fillRect((width/2) - (size/2), ((height/2) - (size/2)) + scrollOffset, size, size);
}

draw();

window.onscroll = function (e)
{
    draw();
}

html, body {
  margin: 0;
}
canvas {
  display: block;
}
#padder {
  height: 100vh;
  background-color: #F00;
}

<canvas id="canvas"></canvas>
<section id="padder"></section>

此外，由于它是浏览器特定的，对于Firefox，请检查高级设置中的滚动选项，或者您应尝试更改mouseWheel

中的about:config滚动行为