キャンバスの計算に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); 
} 

あなたが使用しているもののブラウザによっては、見ることができるように、あなたはスクロールによって引き起こされる「glitchiness」の様々なレベルがあるでしょう。センターの正方形は、全時間同じ場所にとどまるべきですが、ユーザーがどれだけスクロールしたかに追いつくことに問題があります。

どのようなブラウザを使用しているかにより、この問題が顕著になります。 Chromeはスクロールの方向を急速に変更すると目立ちますが、FirefoxとEdgeはスクロールの速度に関係なく目立ちます。

これについてもっと良い方法がありますか？

Answer 1

注意：未解決策が、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のため、高度な設定でスクロールオプションを確認するか、about:config

に mouseWheelスクロール動作を変更してみなければならベース