1

我的 PWA 应用程序在 main.css 文件中有此代码。

  @media all and (display-mode: fullscreen) {
    overscroll-behavior: none;
  }

当添加到主屏幕并以全屏模式启动时（在 manifest.json 中设置），下拉刷新按预期禁用。

但是，在 TWA 情况下：

当我使用https://github.com/GoogleChromeLabs/bubblewrap pull-to-refresh 行为创建签名的 APK 时，没有禁用。

有什么解决办法吗？

4

3 回答 3

1

最终制作了一个Javascript解决方法：

首先，我在文件中更新了 twaManifest 。build.gradle

以下行：

launchUrl: '/?utm_source=twa'

当检测到 twa 查询参数时，我添加了这段 js 以将 css 类添加到 body 元素：

export const disablePullToRefreshTWA = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get('utm_source');
    if (myParam === 'twa') {
        document.body.classList.add('twa-app');
    }
};

我main.css现在有：

body.twa-app {
  overscroll-behavior: none;
}

编辑：我将 PWA 的 pwa（显示模式）媒体查询添加到 HomeScreen 案例

于 2020-06-30T14:55:06.660 回答
0

当您滚动超过顶部边界时，Android 上的 Chrome 会刷新页面。这可以通过在“html”元素上将“overscroll-behavior”设置为“none”来防止。

html { margin: 0; overscroll-behavior: none; }

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior#preventing_an_underlying_element_from_scrolling

于 2021-09-28T16:25:03.977 回答
0

就这样

body {
overscroll-behavior: contain;
}
于 2021-02-24T15:17:43.707 回答