How to prevent scrolling of body when popup is visible? It should work on iOS mobile also. Popup can be scroll tough

Question

Tried all these option, two frameworks, none works:

import preventScroll from 'prevent-scroll'
import {
    disableBodyScroll,
    enableBodyScroll,
    clearAllBodyScrollLocks,
} from 'body-scroll-lock'

    useEffect(() => {
        document.body.style.overflow = 'hidden'
        document.body.style.touchAction = 'none'

        document.addEventListener('scroll', function (event) {
            event.preventDefault()
        })

        disableBodyScroll()
        preventScroll.on()

        // other approach from here: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
        document.body.style.position = 'fixed'
        document.body.style.top = `-${window.scrollY}px`

        return () => {
            document.body.style.overflow = 'auto'
            document.body.style.touchAction = 'auto'

            document.removeEventListener('scroll', function (event) {
                event.preventDefault()
            })
            preventScroll.off()

            clearAllBodyScrollLocks()

            document.body.style.position = ''
            document.body.style.top = ''
        }
    }, [])

The last approach comes from here will show a black stripe here: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ Keyboard is not visible on screen shot.

Paddie

Does this answer your question? Prevent BODY from scrolling when a modal is opened – Macule

I have not seen any now approach what I listed here, most of the answer try to set only overflow to hidden and back to none. But this does not work on Safari. – Stratification

Should work on safari as well – Macule

No, it does not work in on iPhone Safari – Stratification