如何在 iOS 13 Safari 中禁用身体滚动(当保存为 PWA 到主屏幕时)? [英] How to disable scrolling on body in iOS 13 safari (when saved as PWA to the homescreen)?

查看：31
本文介绍了如何在 iOS 13 Safari 中禁用身体滚动(当保存为 PWA 到主屏幕时)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题:

我知道这个问题已经被问过十几次了，但这些问题的解决方案都不适合我.

我希望 iOS 13 Safari 上的 body 元素不滚动.这意味着没有滚动，也没有弹性反弹(溢出滚动)效果.

我有两个相邻的元素，我在上面设置了 overflow: scroll;，它们应该滚动，只是它们周围的主体不应该滚动.

我尝试过的所有解决方案都不适用于渐进式网络应用程序，这些应用程序在其头部具有以下标记并保存到主屏幕.

我尝试过的解决方案:

尝试 1: 设置隐藏在正文和/或 html 上的溢出.不适用于 iOS 13 Safari.

https://stackoverflow.com/a/18037511/10551293

html {位置:相对；溢出:隐藏；高度:100%；}身体 {位置:相对；溢出:隐藏；高度:100%；}

<块引用>

在 iOS 13 safari 中什么都不做，但在 macOS safari 和 Firefox 中有效.

尝试2:固定在身体上的设置位置.对我不起作用，因为当用户滚动时，主体不会，但滚动仍然阻止我的两个内部元素在溢出反弹动画时滚动.

https://stackoverflow.com/a/47874599/10551293

body {位置:固定；}

<块引用>

仅将正文放在页面滚动上.滚动(溢出滚动)通过固定体发生...

尝试 3: 防止默认触摸移动.没有用(是一个较旧的解决方案......).

https://stackoverflow.com/a/49853392/10551293

document.addEventListener(touchmove", function (e) {e.preventDefault();}, { 被动: false });

<块引用>

据我所知，什么都不做.不在 safari 和 Firefox 中.

尝试 4: 阻止默认滚动窗口并将滚动位置设置回 0.由于动画错误，不可行.

window.addEventListener(scroll", (e) => {e.preventDefault();window.scrollTo(0, 0);});

<块引用>

将滚动位置设置回 0，但溢出滚动仍然适用，最终导致错误行为.

演示它的片段:

要自己测试，请将下面的代码段保存为 html 文件，然后将其保存到 iPad(或 iPad 模拟器)的主屏幕上.保存到主屏幕时，正文突然变得可滚动.

<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文档</title><meta name="apple-mobile-web-app-capable" content="yes"><身体><风格>正文，HTML {位置:相对；溢出:隐藏；高度:100%；宽度:100%；}身体 {边距:0；显示:弹性；弹性方向:列；}导航，页脚{宽度:100%；高度:5rem；背景:蓝色；弹性收缩:0；}主要的 {显示:弹性；高度:0；弹性增长:1；填充:2rem；}部分 {宽度:50%；溢出:滚动；显示:弹性；弹性方向:列；对齐项目:居中；}div {弹性收缩:0；宽度:25%；高度:18rem；保证金:1rem；背景:红色；}</风格><nav></nav><主要><部分><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></节><部分><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></节></main><页脚></页脚></html>

它们都没有以我可以接受的方式工作，现在我该怎么做才能使其在 iOS 13 Safari 中正常工作(当作为 PWA 保存到主屏幕时)?

解决方案

我结合了问题中的 try 2 和 try 4.固定体不显示溢出滚动，滚动重置防止后台溢出滚动的长动画.这真的很丑，但它有点管用.

body {位置:固定；}

window.addEventListener("scroll", (e) => {e.preventDefault();window.scrollTo(0, 0);});

The Problem:

I know this question has been asked a dozen of times, but none of the solutions on those questions worked for me.

I want the body element on iOS 13 safari to not scroll. This means no scrolling, and no elastic bounce (overflow-scrolling) effect.

I have two elements next to each other on which I have set overflow: scroll;, those should scroll, just the body around them shouldn't.

All the solutions I've tried just don't work in progressive webapps that have the following tag inside their head and are saved to the homescreen.

<meta name="apple-mobile-web-app-capable" content="yes">

Solutions I've tried:

try 1: setting overflow hidden on body and/or html. Didn't work for iOS 13 safari.

https://stackoverflow.com/a/18037511/10551293

html {  
    position: relative;
    overflow: hidden;
    height: 100%;
}

body {
    position: relative;
    overflow: hidden;
    height: 100%;
}

does nothing in iOS 13 safari but works in macOS safari and Firefox.

try 2: setting position fixed on the body. Doesn't work for me because when the user scrolls, the body doesn't but the scrolling still prevents my two inner elements from scrolling while the overflow-bounce is animating.

https://stackoverflow.com/a/47874599/10551293

body {
    position: fixed;
}

only puts the body over the scrolling of the page. The scrolling (overflow-scrolling) happens through the fixed body...

try 3: preventing the default on touch moved. Didn't work (is an older solution...).

https://stackoverflow.com/a/49853392/10551293

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, { passive: false });

does nothing as I can tell. Not in safari nor in Firefox.

try 4: preventing the default on scrolling of the window and setting the scroll position back to 0. Is not viable because of buggy animations.

window.addEventListener("scroll", (e) => {
    e.preventDefault();
    window.scrollTo(0, 0);
});

sets the scroll position back to 0 but the overflow-scrolling still applies which ends up in a buggy behaviour.

A snippet that demonstrates it:

To test it yourself, save the snippet below as an html file, and save it to the homescreen on an iPad (or iPad simulator). The body suddenly becomes scrollable when saved to the homescreen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
    <style>
        body, html {
            position: relative;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        nav, footer {
            width: 100%;
            height: 5rem;
            background: blue;
            flex-shrink: 0;
        }

        main {
            display: flex;
            height: 0;
            flex-grow: 1;
            padding: 2rem;
        }

        section {
            width: 50%;
            overflow: scroll;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        div {
            flex-shrink: 0;
            width: 25%;
            height: 18rem;
            margin: 1rem;
            background: red;
        }
    </style>

    <nav></nav>

    <main>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
        
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </main>

    <footer></footer>
</body>
</html>

None of them worked in an acceptable way for me, now how do I do this so it works properly in iOS 13 safari (when saved as a PWA to the home screen)?

解决方案

I combined try 2 and try 4 from the question. The fixed body shows no overflow scrolling and the scroll reset prevents the long animation of the overflow scrolling in the background. It's really ugly but it kinda works.

body {
  position: fixed;
}


window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});

这篇关于如何在 iOS 13 Safari 中禁用身体滚动(当保存为 PWA 到主屏幕时)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆