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

出于各种原因，我一直在尝试使用HTML5画布制作视差效果。我一直在使用window.scrollY属性来确定用户已向下滚动了多远，因此可以使用此值计算转换

我想最好通过以下方式来解释这一点：

正如您所见，根据您使用的浏览器，滚动会导致不同程度的“闪烁”。中间的正方形应该一直保持在同一个位置，但是要跟上用户滚动的距离还是有问题的

这个问题的严重程度取决于您使用的浏览器；Chrome只有在你快速连续地改变滚动方向时才会被注意到，而Firefox和Edge则无论你滚动的速度有多慢都会被注意到

有没有更好的办法

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

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

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
让宽度；
让高度；
addEventListener（“调整大小”，调整画布大小）；
函数resizeCanvas（）{
宽度=canvas.width=document.documentElement.clientWidth；
高度=canvas.height=document.documentElement.clientHeight；
}
调整画布的大小（）；
让滚动偏移；
让尺寸=50；
函数绘图（）{
scrollOffset=window.scrollY；
ctx.clearRect（0，0，宽度，高度）；
ctx.fillStyle=“#000”；
ctx.fillRect（（宽度/2）-（大小/2），（（高度/2）-（大小/2））+scrollOffset，size，size）；
}
draw（）；
window.onscroll=函数（e）
{
draw（）；
}

html，正文{
保证金：0；
}
帆布{
显示：块；
}
#填充器{
高度：100vh；
背景色：#F00；
}

JS-based会因为异步滚动而出现类似的问题。通常解决方案是使用固定位置CSS。@AlexanderO'Mara在正常情况下，我会使用

位置：fixed

，但在我的实际代码中，我会使用实际的“视差”效果（元素不会固定，但会随页面缓慢移动）我有多个元素将以不同的速率移动。查看设置

指针事件：滚动期间所有元素均无
，这是使基于滚动的效果更平滑的常用技术。。。
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);
}