Как лучше запретить отскок сайта webapp telegram?

Ссылка скопирована
Telegram Веб-разработка
1 ответ

По вводным: есть webapp в telegram, чего-то заумного нет, обычная верстка на react.
Сейчас ситуация такая: проблема в том, что в полноэкранном режиме сайт можно потянуть сверху вниз и снизу вверх - и он как будто отскакивает (См. Видео)
Каким способом можно запретить, чтобы сайт можно было так тянуть?

Уже сделано: 

tg.expand(); tg.disableVerticalSwipes(); tg.requestFullscreen();

Также проверял для body прописать стили: 

position: fixed; inset: 0;

По вводным: это помогает, но тогда появляется баг: есть потянуть страницу сверху вниз, то тогда сайт может перестать реагировать на клики.
По вводным: наверное, есть какой-то хак, чтобы изменить поведение телеграм..

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Сергей Миронов Ответ

В Telegram WebApp “отскок” сверху/снизу появляется из-за нативного overscroll в WebView. Обычная React-вёрстка здесь не виновата: мобильный WebView пытается прокручивать страницу, даже если визуально контента почти нет. Решать нужно сразу на двух уровнях: Telegram WebApp API и CSS/JS ограничение overscroll.

Сначала используйте API Telegram, если доступен в вашей версии:

const tg = window.Telegram?.WebApp;
tg?.ready();
tg?.expand();
tg?.disableVerticalSwipes?.();

const tg = window.Telegram?.WebApp; tg?.ready(); tg?.expand(); tg?.disableVerticalSwipes?.();

disableVerticalSwipes есть не во всех версиях клиента, поэтому обязательно оставляйте CSS-защиту.

CSS для корня приложения:

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
 
.app {
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
}

html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; } .app { height: 100dvh; overflow: hidden; touch-action: none; }

Если внутри есть реальная прокрутка, не отключайте touch-action на всём приложении. Сделайте отдельный scroll-контейнер:

.app-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

Для iOS иногда дополнительно блокируют pull-to-refresh/overscroll на границах контейнера через обработчик touchmove, но это нужно делать аккуратно, чтобы не убить нормальную прокрутку внутри списков.

Итог: вызовите expand() и disableVerticalSwipes(), задайте 100dvh, уберите overscroll у body и перенесите прокрутку в контролируемый контейнер. Тогда WebApp перестанет “пружинить” всей страницей, а контент останется управляемым.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ