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.