使用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进行画布计算会导致问题

回答

相关问题