Unable to scroll inside a fixed content when useLockBodyScroll is used.

[AkromDev]

What is the current behavior? On iOS, It is not possible to scroll inside a fixed positioned content when useLockBodyScroll is used. It works fine in Desktops and android phones though.

Steps to reproduce

• Open your IOS safari
• Go to this live demo
• Click Open button to open overlay and try to scroll inside that overlay
• Notice you can't scroll.

For comparison, go to the demo without body lock to view all scrollable content

I recorded the issue below.

Using useLockBodyScroll from react-use

Without body scroll lock

What is the expected behavior? Overlay should be scrollable on ios as well

A little about versions:

• OS: IOS 15.1
• Browser (vendor and version): safari 15.1
• React: ^18.2.0
• react-use:^18.2.0
• Did this worked in the previous package version? : Looking at open issues, no

Source code:: https://github.com/AkromDev/fixed-position-ios-scroll

[JordanDDisch]

yea it looks like the hook disables all touch scroll events for IOS devices https://github.com/streamich/react-use/blob/master/src/useLockBodyScroll.ts#L58

[henrikgundersen]

For those in need of a quick fix while this issue is resolved:

Add onTouchMove={(e) => e.stopPropagation()} to the outermost element that should still be scrollable when useLockBodyScroll is active.

This will prevent the onTouchMove event from bubbling up and getting caught by useLockBodyScrolls scroll preventing event listener on iOS.

[AkromDev]

I ended up using usePreventScroll from @react-aria/[email protected] and it worked perfectly on IOS devices.

import { usePreventScroll } from '@react-aria/overlays';

export const MyComponent = () => {
   ...
   usePreventScroll({ isDisabled: !isMobileMenuOpened });
   /* Prevents the page from scrolling when the mobile menu is opened. */
   ...
}

I've just checked the docs and usePreventScroll is now imported from react-aria directly but I did not test that one. If you don't want to install react-aria, I would recommend checking its implementation.