1

我编写了一个 javascript 平滑滚动函数来提供单页导航。代码基本上就像底部的代码。

该函数以要滚动的像素数调用，然后将其分为 30 步，然后循环滚动，直到达到该数字。因此，我尝试了使用 setTimeout 和 requestAnimationFrame 的两种循环变体。

它在所有桌面浏览器以及我的 android 手机上几乎都能完美运行，但是 IOS 设备上的 Safari 和 Chrome 无法达到预期的效果。在每次迭代中使用 alert 进行测试表明，所有值都计算正确，但是实际滚动量不匹配，导致滚动停止在错误的位置。

我无法提供演示，因为它是开发中的商业应用程序，我也尝试了一个简化的 jsfiddle，但这实际上并没有显示错误，所以它必须是与导致问题的其他东西的组合（可能是 css 固定位置，最小高度 100vh，滚动事件处理程序...？）。

我绝对认为这种奇怪的行为之前应该被其他人注意到。有人可以给我一个提示吗？

function scrollstep(dist) {
    var n = Math.floor(dist / 30 * (1 - Math.abs(scrstp_dist / dist - 0.5)));
    if (Math.abs(scrstp_dist + n) < Math.abs(dist)) {
        scrstp_dist+=   n;
    // alert(n);
        w.scrollBy(0, n);
        w.requestAnimationFrame( function(timestamp) { scrollstep(dist); } );
    } else {
        w.scrollBy(0, dist - scrstp_dist);
    }
}
4

0 回答 0