防止 iOS Safari 在不使用触摸操作时为其地址栏设置动画

Question

我已经在我的网站中实现了自定义触摸行为，并且正在使用 touch -action 阻止浏览器处理用户手势。

问题是，当用户使用 touch-action: none 在元素上上下滑动时，Safari 会折叠并展开底部的地址栏。内容不会滚动，这是预期的行为，但地址栏会更改其状态，但事实并非如此。这还会调整屏幕大小，导致布局发生变化并引发 resize 事件侦听器，并破坏用户体验。

Chrome 与 Safari 一样，底部也有一个 UI 栏，当页面上下滚动时，该 UI 栏会出现和消失，但当用户在 touch-action: none 元素上滑动时，它会保持静止。这是正确的行为。

我制作了一个测试页面，可以在其中重现问题。尝试在 Safari 中的红色框上滑动手指，即使页面没有滚动，地址栏也会以动画方式进出。

我还在我的设备上制作了一个视频，我在其中演示了 Chrome 为何不具备该功能问题，但 Safari 确实如此。

---

我在 Apple 的 Safari 官方反馈表上提交了错误报告。与此同时，这个问题有解决方法吗？

我尝试了将 height: 100% 和 overflow: hide 添加到 html 和 body 的常用方法，以各种方式不同的组合，但没有任何帮助。

Answer 1

试试这个打字稿代码：

let disableScroll = false;
let startY = 0;

function isScrollable(e: HTMLElement | null, up: boolean): boolean {
    if (!e) return false;

    if (up && e.scrollTop + e.clientHeight < e.scrollHeight) {
        return true;
    }

    return e.scrollTop > 0;
}

function hasScrollableBase(e: HTMLElement | null, up: boolean) {
    while (e && e !== document.body) {
        e = e.parentNode as HTMLElement | null;
        if (isScrollable(e, up)) return true;
    }
    return false;
}

function onTouchStart(e: TouchEvent) {
    startY = e.touches[0].pageY;
    disableScroll = false;
}

function onTouchMove(e: TouchEvent) {
    const el =
        e.target instanceof HTMLElement ? (e.target as HTMLElement) : null;

    if (!el) {
        e.preventDefault();
        return false;
    }

    if (disableScroll || e.touches.length > 1) {
        e.preventDefault();
        return false;
    }

    const dy = e.touches[0].pageY - startY;


    if (hasScrollableBase(el, dy < 0)) return true;

    disableScroll = true;
    e.preventDefault();
    return false;
}


window.addEventListener("touchmove", onTouchMove, {
    passive: false,
});
window.addEventListener("touchstart", onTouchStart);