Prevent Body Scrolling (iOS)

There a lot of threads online about how to lock the body especially on iOS, but I haven’t found a good answer.

body { overflow: hidden; } Doesn’t work on iOS.

My question is: how can I prevent Body Scrolling on iOS with react-modal?

Note: I found this package that it might work, but the problem is that I can’t find a way to make it work with react-modal and hooks. React Modal doesn’t accept a ref using useRef.

https://github.com/willmcpo/body-scroll-lock

Any help?

[ursnj]

Simple solution would be 👍

onAfterOpen={() => document.body.style.overflow = 'hidden'}
onAfterClose={() => document.body.style.overflow = 'unset'}

[trungtin]

@Alfrex92 you could try this.

<ReactModal
  onAfterOpen={() => {
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }}
  onAfterClose={() => {
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }}
  ...other props
/>