streamich
Overflow scroll doesn't work in react-modal on iOS
What is the current behavior? On iOS, when there is a an element with overflow scroll in react-modal, the scroll element does not scroll the content.
Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:
https://y2nsk.csb.app/
Open a react modal on a page in iOS and activate the useLockBodyScroll hook. Try to scroll the lorem ipsum text section and notice that you cannot scroll. This works fine in Chrome on desktop browsers but not on Safari or Chrome on iOS. iOS version is the latest at 13.6.1.
What is the expected behavior? Contents in a scroll container should scroll inside of a modal while using the useLockBodyScroll hook.
A little about versions:
- OS: iOS 13.6.1
- Browser (vendor and version): Chrome and Safari on mobile
- React: 16.13.1
-
react-use: 15.1.1 - Did this worked in the previous package version?: Not that I know of. This is my first time experiencing this.
I can replicate as well.
https://github.com/streamich/react-use/pull/873 introduced the following which is causing this bug.
https://github.com/streamich/react-use/blob/b4fe4b847bac3b0c01ef424a219b58680e9e5ebb/src/useLockBodyScroll.ts#L55-L59
Hey @andrico1234 👋🏽, any alternative approaches for the desired behavior that we can do here instead?
@rogervera It is work for me. I tested on: Safari 15.3, IPadOS 15, IOS 15, Google Chrome 99, Firefox 98
export const useLockBodyScroll = () => {
useEffect(() => {
const body = document.body
const scrollPosition = window.pageYOffset
body.style.overflow = 'hidden'
body.style.position = 'fixed'
body.style.top = `-${scrollPosition}px`
body.style.width = '100%'
return () => {
body.style.removeProperty('overflow')
body.style.removeProperty('position')
body.style.removeProperty('top')
body.style.removeProperty('width')
window.scrollTo(0, scrollPosition)
}
}, [])
}
For anyone looking for an alternative, this guide should work too: https://usehooks.com/useLockBodyScroll/
