主页 / 问题 / 1345019
Accepted
Daniil Screpchenko
Asked:2022-04-03 00:58:51 +0000 UTC2022-04-03 00:58:51 +0000 UTC

减慢手机上的js平滑滚动

  • 772

我需要平滑滚动。scroll-behavior: smooth;和window.scrollTo({ top: to, behavior: "smooth" });- 不适合，因为 Safari 不支持。是这样的吗：

  1. 我得到了元素的位置（它相对于整个页面的高度）
  2. 我得到window.pageYOffset- 视口的当前位置。
  3. 我计算距离。
  4. 向下滚动window.scrollBy到дистанция/скорость
  5. 如果到目标的距离大于滚动步长，我重复上述步骤setTimeout。

在 PC 上，一切正常，平滑地滚动到元素。在电话上（真实的，而不是 DevTools）- 滞后。为什么会这样，可以做什么？

强烈建议不要使用库。

这是代码：

class jscroll {
        
            static to(item)
            {
                const stepCoefficient = 100;
                const timer = 1;
        
                let to = document.querySelector(item).getBoundingClientRect().top;
                let distance = to - window.pageYOffset + stepCoefficient;
        
                let step = 10;
                let oldStep;
        
                function scroll() {
                    oldStep = step;
                    step = distance / stepCoefficient;
        
                    window.scrollBy(0, step);
        
                    distance = to - window.pageYOffset + stepCoefficient;
        
                    if (step > 1 && step != oldStep)
                        setTimeout(scroll, timer);
                    else
                        window.scrollTo(0, to);
                }
                scroll();
            }
        }
        
        export { jscroll }
javascript

2 个回答

  1. Best Answer

    在移动设备上测试。

    我认为操作不流畅的原因可能是函数调用过于频繁（新执行前只有1毫秒的延迟）。它的调用频率应该减少大约 17 次（对于频率为 60 Hz 的普通屏幕）。有了window.requestAnimationFrame它，您可以拨打“最常与屏幕刷新率一致”的电话，而不会使设备过载。

    在我的示例中，编号使检查平滑度变得更容易。该变量offset负责缩进，并且speed- 负责滚动速度。

    function scrollTo(item) {
    let offset = 0;
    let speed = 20;

    let to = document.querySelector(item).getBoundingClientRect().top;
    let dy = to - window.pageYOffset + offset;
    let moreZero = (dy >= 0)? 1 : -1;
    let dist = dy * moreZero;
    let step = speed * moreZero;
    window.requestAnimationFrame((scroll = function() {
        if ((dist -= speed) > 0) {
            window.scrollBy(0, step);
            window.requestAnimationFrame(scroll);
        }
    }));
}

document.getElementsByTagName("button")[0].onclick = () => {
    scrollTo("#l");
}


// ниже - создание элементов для проверки
function createDivs() {
    for (let i = 0; i < 200; i++) {
        let e = document.createElement("div");
        e.innerHTML = i;
        document.body.appendChild(e);
    }
    let e = document.createElement("div");
    e.id = "l";
    document.body.appendChild(e);
}
createDivs();
    <button>Scroll</button>

    • 3

  2. 试试吧

    window.scrollTo(0, to);

    选择一些最顶层的元素（例如，标题）

    并像这样滚动到它：

    scrollTargetEl.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
});

    scrollIntoView 文档

    我有一个项目，这种方法无处不在。

    然后你就不需要写骨头了static to(item)

    • 0

相关问题