mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
Enhance scroll locking in ConnectionModal and TopUpModal: improve cross-platform support by adding touchmove event prevention for Android, and update styling to ensure consistent behavior and responsiveness across devices.
This commit is contained in:
@@ -55,7 +55,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
||||
)
|
||||
const popupRef = useRef<Window | null>(null)
|
||||
|
||||
// Scroll lock when modal is open (cross-platform)
|
||||
// Scroll lock when modal is open (cross-platform including Android)
|
||||
useEffect(() => {
|
||||
const scrollY = window.scrollY
|
||||
const body = document.body
|
||||
@@ -67,7 +67,10 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
||||
bodyPosition: body.style.position,
|
||||
bodyTop: body.style.top,
|
||||
bodyWidth: body.style.width,
|
||||
bodyHeight: body.style.height,
|
||||
htmlOverflow: html.style.overflow,
|
||||
htmlHeight: html.style.height,
|
||||
bodyTouchAction: body.style.touchAction,
|
||||
}
|
||||
|
||||
// Lock scroll
|
||||
@@ -75,14 +78,29 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
||||
body.style.position = 'fixed'
|
||||
body.style.top = `-${scrollY}px`
|
||||
body.style.width = '100%'
|
||||
body.style.height = '100%'
|
||||
body.style.touchAction = 'none'
|
||||
html.style.overflow = 'hidden'
|
||||
html.style.height = '100%'
|
||||
|
||||
// Prevent touchmove on backdrop (Android fix)
|
||||
const preventScroll = (e: TouchEvent) => {
|
||||
const target = e.target as HTMLElement
|
||||
if (target.closest('[data-modal-content]')) return
|
||||
e.preventDefault()
|
||||
}
|
||||
document.addEventListener('touchmove', preventScroll, { passive: false })
|
||||
|
||||
return () => {
|
||||
body.style.overflow = originalStyles.bodyOverflow
|
||||
body.style.position = originalStyles.bodyPosition
|
||||
body.style.top = originalStyles.bodyTop
|
||||
body.style.width = originalStyles.bodyWidth
|
||||
body.style.height = originalStyles.bodyHeight
|
||||
body.style.touchAction = originalStyles.bodyTouchAction
|
||||
html.style.overflow = originalStyles.htmlOverflow
|
||||
html.style.height = originalStyles.htmlHeight
|
||||
document.removeEventListener('touchmove', preventScroll)
|
||||
window.scrollTo(0, scrollY)
|
||||
}
|
||||
}, [])
|
||||
@@ -179,7 +197,9 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
data-modal-content
|
||||
className="w-[calc(100%-2rem)] max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden animate-scale-in"
|
||||
style={{ touchAction: 'pan-y' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
|
||||
Reference in New Issue
Block a user