search

willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.04k stars 338 forks source link

iOS: Problem with modal child with horizontal scroll #233

Closed krutoo closed 2 years ago

krutoo commented 2 years ago

Hi, first of all thanks for great library!

In my project i use body-scroll-lock@3.1.5 in i found strage bug in complex usage case.

In mobile version of my app i have a "screen" that overlaps the content of the body of the page.

There is a "slider" on this screen - a block with horizontal scroll able.

I noticed that in the case where the screen is completely scrolled vertically, the child slider handles scrolling horizontally very badly.

But if you scroll the screen up at least 1 pixel, then the processing of scrolling gestures starts to work perfectly.

There is a sandbox with example of problem: https://codesandbox.io/s/ios-body-scroll-lock-problem-with-full-scroll-modal-and-its-child-with-horizontal-scroll-72nsw

I don't know if this is a body-scroll-lock library problem or if it is a problem of the iOS itself.

Can someone help figure out if this can be fixed without "crutches"?

didkan commented 2 years ago

I have the exact same issue. It was driving me crazy until I realised that body-scroll-lock was causing the issue.

I also have a position: fixed modal that activates disableBodyScroll when opened and in that modal a horizontally scrollable div. My problems were that on IOS Safari the scrollable div would randomly work or not. It almost seemed like the direction you moved/dragged your finger had be almost exactly horizontal for the scrolling to work. If you scrolled slightly downward left/right it would just not move at all.

The above codesandbox describes my layout pretty much exactly and I can also confirm that using the "scroll down 1 px"-fix also works for me.

didkan commented 2 years ago

@krutoo I managed to "fix" this by using the allowTouchMove option as described here: https://github.com/willmcpo/body-scroll-lock#more-complex and adding body-scroll-lock-ignore attribute to all my horizontal scrollers in the position fixed modal. Worked like a charm!

Much more elegant than "-1px scrollTop" hack.

krutoo commented 2 years ago

@didkan Thank you for your answer! Looks like it is really worked