Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work on iOS mobile devices #204

Open
dancherb opened this issue Nov 11, 2020 · 13 comments
Open

Doesn't work on iOS mobile devices #204

dancherb opened this issue Nov 11, 2020 · 13 comments

Comments

@dancherb
Copy link

Works great on desktop browsers and the mobile device view in Chrome's dev tools.

On iOS Safari, Chrome and Firefox, the body scroll locks but I'm unable to scroll in the modal opened by touching. Two-finger scroll seems possible but is buggy and also scrolls in the body element.

@diachedelic
Copy link
Collaborator

Are you talking about the this demo?

@gauthierblanpain
Copy link

Have you got your target element set as the element that is meant to carry on scrolling? i.e. the element with overflow: auto

I was experiencing exactly the same issue you are and it was because I was accidentally targeting the parent element to the div actually doing the scrolling.

@fresswolf
Copy link

Are you talking about the this demo?

Exactly this demo doesn't work on iOS 14.2. Once you first scroll down a bit to hide the bottom safari navigation bar and then open the modal, one can still scroll the body.

@jvitela
Copy link
Contributor

jvitela commented Dec 14, 2020

could you have a look at this pull request and see if that solves your problem?
#207

@snowsergo
Copy link

Works great on desktop browsers and the mobile device view in Chrome's dev tools.

On iOS Safari, Chrome and Firefox, the body scroll locks but I'm unable to scroll in the modal opened by touching. Two-finger scroll seems possible but is buggy and also scrolls in the body element.

Hellow, I have the same problem. Please, can you say how did you fixed this.

@jvitela
Copy link
Contributor

jvitela commented Dec 8, 2021

Hi, @snowsergo please make sure you are testing with the branch from this pull request: #229. That branch contains the latest fixes which are not yet merged to the main branch.

@charkour
Copy link

To enable scrolling of target elements on iOS, you need to enable it in options.

disableBodyScroll(currentReference, { allowTouchMove: () => true });

@bradleykhan
Copy link

bradleykhan commented May 12, 2022

@charkour This works at the expense of re-enabling body scroll behind the modal it seems

@charkour
Copy link

charkour commented May 12, 2022

@bradleykhan, yeah you're right. This package is a little buggy and it appears to be no longer maintained. My team is looking for a better solution but this is the best we've found for now.

Thanks for your comment!

@diachedelic
Copy link
Collaborator

@charkour
Copy link

@diachedelic, hi!

Yeah, we initially tried that too but ran into issues when trying to use multiple locks. Didn't try too long. Seemed to work better than this package in more cases so it's worth a shot in my opinion!

@rick-liruixin
Copy link

@bradleykhan,They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use.

npm i body-scroll-lock-upgrade

repair Changelog
Refer to the releases page.

@rick-liruixin
Copy link

在桌面浏览器和 Chrome 开发工具中的移动设备视图上运行良好。
在 iOS Safari、Chrome 和 Firefox 上,主体滚动锁定,但我无法在通过触摸打开的模式中滚动。双指滚动似乎是可能的,但有问题,并且还会在 body 元素中滚动。

你好,我有同样的问题。拜托,你能说说你是怎么解决这个问题的吗?
They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use.

npm i body-scroll-lock-upgrade

repair log, Refer to the releases page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants