javascript - 使用 window.scrollY 进行 Canvas 计算会导致问题

Question

出于各种原因，我一直在尝试使用 HTML5 Canvas 制作视差效果。我一直在使用 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);
}

如您所见，根据您使用的浏览器，滚动会导致不同程度的“故障”。中间的方 block 应该始终保持在同一个位置，但是在跟上用户滚动的距离方面存在问题。

此问题的严重程度取决于您使用的浏览器； Chrome 仅在您快速连续更改滚动方向时才会引人注意，而无论您滚动多慢，Firefox 和 Edge 都会引人注意。

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

Answer 1

Note: Not a solution but a suggestion

只有在页面上滚动时才会出现视差。应该类似于下面的代码片段:

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，请检查高级设置中的滚动选项，或者您应尝试更改 about:config 中的 mouseWheel 滚动行为