Open rexydye opened 11 months ago
I've investigated @tapswap_bot (props to them) source code (webkit debug) and found the solution. I've also made the scrolling working (their solution was breaking it).
So steps to implement:
(tailwind style) document: h-auto, overflow-hidden body: min-h-screen h-screen overflow-hidden
js code:
const overflow = 100
document.body.style.overflowY = 'hidden'
document.body.style.marginTop = `${overflow}px`
document.body.style.height = window.innerHeight + overflow + "px"
document.body.style.paddingBottom = `${overflow}px`
window.scrollTo(0, overflow)
let ts: number | undefined
const onTouchStart = (e: TouchEvent) => {
ts = e.touches[0].clientY
}
const onTouchMove = (e: TouchEvent) => {
if (scrollableEl) {
const scroll = scrollableEl.scrollTop
const te = e.changedTouches[0].clientY
if (scroll <= 0 && ts! < te) {
e.preventDefault()
}
} else {
e.preventDefault()
}
}
document.documentElement.addEventListener('touchstart', onTouchStart, { passive: false })
document.documentElement.addEventListener('touchmove', onTouchMove, { passive: false })
After that it works perfectly, no rage scroll breaks it. The only concern is that maybe some device has reversed scroll direction, in that case we will need to reverse touchmove condition logic, but anyway - it's working.
I have an app which is made with WEBGL. So i have a canvas full screen on the telegram viewport. This solutions is not working on this kind of apps because they are no the same DOM kind. It's a shame they can't disable this option : ( There will never be good games if this can't be achieved,,,,
It would be nice if there was an option to disable closing a webapp with a gesture. I have an interactive map in my webapp and if I drag it down the web app may close.