使用window.scrollY進行畫布計算會導致問題

由於各種原因，我一直在嘗試使用HTML5畫布製作視差效果效果。我一直使用window.scrollY屬性來確定用戶滾動的距離，因此可以使用此值計算轉換。使用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則顯而易見，無論滾動速度如何緩慢。

會有更好的方法來解決這個問題嗎？

來源

2017-08-08 mattrick

JS [滾動聯效果]（https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_e ffects）由於異步滾動而存在這樣的問題。通常解決方案是使用固定位置CSS。 –

@AlexanderO'Mara在正常情況下，我會使用'position：fixed'，但在我的實際代碼中，我正在做一個實際的「視差」效果（其中元素不會固定但隨頁面緩慢移動），而我有多個元素會以不同的速率移動。 – mattrick

在滾動過程中查看所有元素的「pointer-events：none」設置，這是使滾動效果更平滑的常用技巧。 – CBroe

注：並非一個解決方案，但建議

視差應該發生，只有當頁面上的一個卷軸。應該像下面的代碼片段：

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滾動行爲基於

來源

2017-08-08 08:06:57 kolunar

使用window.scrollY進行畫布計算會導致問題

回答

相關問題