简而言之:
在 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;
}
我将非常感激和高兴至少有一些有关修复此错误的信息,谢谢!