主页 / 问题 / 1599278
Accepted
ievitsky
Asked:2024-11-09 18:19:47 +0000 UTC2024-11-09 18:19:47 +0000 UTC

粘性 Webapp Telegram |安卓和ios的区别

  • 772

简而言之：

在 iOS 上的 webap telegram 中，在 Next.js (SPA) 上应用程序的所有页面上，应用程序自上而下滚动（甚至具有“固定bottom-0”样式的导航栏）随整个页面滚动。

在开发过程中，Android 设备或 Windows 上的浏览​​器中不存在此错误。

最初的目标是使应用程序无法通过滑动关闭，这是使用 Office 实现的。指南（https://docs.telegram-mini-apps.com/platform/sticky-app），但出现了这个错误。

由于我没有 iOS 设备，调试变得很复杂，我必须不断地打扰朋友和熟人来检查下一个消除错误的假设。

也许这会对您有所帮助，帮助您找到错误所在或指出我要挖掘的方向

1. Bot制作： @PuPcoinBot（自己查看bug）

2. 该错误的视频链接： https://youtube.com/shorts/S0FrakeO18U?feature =share

3.主布局.tsx：

<>
      <Head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" // , viewport-fit=cover
        />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      </Head>
      <Script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></Script>
      <Script id="tg">
        {`(function() {
      var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;
      var lp = retrieveLaunchParams();

      // Some versions of Telegram don't need the classes above.
      if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {
        return;
      }

      // Expand the application.
      postEvent('web_app_expand');

      document.body.classList.add('mobile-body');
      document.getElementById('wrap').classList.add('mobile-wrap');
      document.getElementById('content').classList.add('mobile-content');
    })();`}
      </Script>
      <Script src="https://telegram.org/js/telegram-web-app.js"></Script>
      <html lang="en">
        <Suspense>
          <body className={inter.className}>
            <div id="wrap">
              <div id="content">{children}</div>
            </div>
          </body>
        </Suspense>
      </html>
    </>

4.CSS样式片段：

body {
  background: black;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior: none; /* Предотвращает перетягивание на iOS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Скрыть скроллбар в Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Webkit (например, Safari, Chrome) */
}

.mobile-body {
  overflow: hidden;
  height: 100vh;
}

.mobile-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: red;
}

.mobile-content {
  height: calc(100% + 1px);
  background: green;
}

我将非常感激和高兴至少有一些有关修复此错误的信息，谢谢！

css

1 个回答

  1. Best Answer

    body {
  background: black;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior-y: contain; /* Предотвращает перетягивание на iOS */
  height: -webkit-fill-available;
  min-height: 100%;
}

html {
  overflow: hidden;
}

body::-webkit-scrollbar {
  display: none; /* Скрыть скроллбар в Webkit (например, Safari, Chrome) */
}

    这个 CSS 样式片段修复了这个错误。

    • 0

相关问题