JavaScript自动滚动在Safari iOS上显得不安

发布于 2025-02-03 12:54:15 字数 4746 浏览 4 评论 0原文

目标

我试图为在线电子书阅读器网站制作自动滚动功能的。用户必须能够按下按钮并自动滚动页面滚动。

到目前为止我发现的每个解决方案的问题

都使用settimeout或setInterval用window.scrollby（0，1）滚动页面这在Chrome上效果很好，但是当我在Safari iOS上进行测试时，该页面根本不会顺利滚动。看来很紧张，以至于文本不再清晰。

。（请在1080p60中观看，因为抖动更明显在60fps）。

这是一个显示问题的视频代码

这是一个简单的HTML文档，可以演示我当前的自动滚动方法。

            let scrollTimeout;

            function pageScroll() {
                scrollTimeout = setTimeout(() => {
                    window.scrollBy(0, 1);
                    pageScroll();
                }, 10);
            }

            function startScroll() {
                pageScroll();
            }
            function stopScroll() {
                clearTimeout(scrollTimeout);
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test Auto-scroll</title>
    </head>
    <body>
        <main style="max-width: 500px; margin: 0 auto; font-size: 32px">
            <div style="position: sticky; top: 0">
                <button onclick="startScroll()">Start</button>
                <button onclick="stopScroll()">Stop</button>
            </div>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
                ducimus, totam debitis sint modi inventore explicabo iusto
                assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
                in, dolor quae.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
                sequi rerum quibusdam nisi provident! Autem aliquid
                reprehenderit doloremque inventore quasi dolore fugit tempora.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                molestias consectetur molestiae labore totam ex et eum nulla
                officia, minima excepturi voluptates, consequatur amet modi!
                Molestiae autem illum ullam accusantium.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
        </main>
    </body>
</html>

原文

The Objective

I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.

The problem

Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.

Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)

The code

Here is a simple HTML document to demonstrate my current method of auto scrolling.

            let scrollTimeout;

            function pageScroll() {
                scrollTimeout = setTimeout(() => {
                    window.scrollBy(0, 1);
                    pageScroll();
                }, 10);
            }

            function startScroll() {
                pageScroll();
            }
            function stopScroll() {
                clearTimeout(scrollTimeout);
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test Auto-scroll</title>
    </head>
    <body>
        <main style="max-width: 500px; margin: 0 auto; font-size: 32px">
            <div style="position: sticky; top: 0">
                <button onclick="startScroll()">Start</button>
                <button onclick="stopScroll()">Stop</button>
            </div>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
                ducimus, totam debitis sint modi inventore explicabo iusto
                assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
                in, dolor quae.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
                sequi rerum quibusdam nisi provident! Autem aliquid
                reprehenderit doloremque inventore quasi dolore fugit tempora.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
                molestias consectetur molestiae labore totam ex et eum nulla
                officia, minima excepturi voluptates, consequatur amet modi!
                Molestiae autem illum ullam accusantium.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
                tenetur cupiditate, maxime fuga sequi earum excepturi
                repudiandae, aliquam, laborum blanditiis iusto.
            </p>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
                laborum mollitia suscipit dolores omnis, cum perferendis rerum
                accusantium doloremque quasi pariatur, deserunt delectus et
                porro nesciunt cumque vel quisquam velit!
            </p>
        </main>
    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

书信已泛黄 2025-02-10 12:54:15

Apple弹出他们的设备以提供电池性能。但是还有其他原因，例如背景应用程序刷新，电池电量少，还有更多。易于可见的原因是上的低功率模式您不会获得与低功率 Off 的相同性能。

使用摘要，您可以清楚地判断低功率模式关闭。

此外，性能可能会受到显示刷新率的影响。您可以使用requestAnimationFrame来管理它，在某种程度上可以控制fps。

以下示例可以帮助您使用requestAnimationFrame。

let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;

function animateScroll(timestamp) {
  const deltaTime = timestamp - prevtimeStamp;
  prevtimeStamp = timestamp;
  const scrollY = window.scrollY;

  if(counter > functionTiming){
    window.scrollBy(0, 1);
    counter = 0;

    if(scrollY === window.scrollY)
      reachedBottom = true;
  }else{
    counter += deltaTime;
  }
  
  if(reachedBottom)
    cancelAnimationFrame(scrollAnimationFrame);
  else
    scrollAnimationFrame = requestAnimationFrame(animateScroll);
}

function startScroll() {
  if(!scrollAnimationFrame)
    animateScroll(0);
}

function stopScroll() {
  if(scrollAnimationFrame)
    cancelAnimationFrame(scrollAnimationFrame);
  scrollAnimationFrame = 0;
}

document.getElementById('functionTimingControl').addEventListener('change', function(e){
  functionTiming = e.target.value;
});

<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
    <div style="position: sticky; top: 0">
        <button onclick="startScroll()">Start</button>
        <button onclick="stopScroll()">Stop</button>
        <input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
</main>

Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.

With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.

Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.

The below example could help you with requestAnimationFrame.

let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;

function animateScroll(timestamp) {
  const deltaTime = timestamp - prevtimeStamp;
  prevtimeStamp = timestamp;
  const scrollY = window.scrollY;

  if(counter > functionTiming){
    window.scrollBy(0, 1);
    counter = 0;

    if(scrollY === window.scrollY)
      reachedBottom = true;
  }else{
    counter += deltaTime;
  }
  
  if(reachedBottom)
    cancelAnimationFrame(scrollAnimationFrame);
  else
    scrollAnimationFrame = requestAnimationFrame(animateScroll);
}

function startScroll() {
  if(!scrollAnimationFrame)
    animateScroll(0);
}

function stopScroll() {
  if(scrollAnimationFrame)
    cancelAnimationFrame(scrollAnimationFrame);
  scrollAnimationFrame = 0;
}

document.getElementById('functionTimingControl').addEventListener('change', function(e){
  functionTiming = e.target.value;
});

<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
    <div style="position: sticky; top: 0">
        <button onclick="startScroll()">Start</button>
        <button onclick="stopScroll()">Stop</button>
        <input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
    </p>
</main>

回复收藏 0 原文

~没有更多了~