search

willmcpo / body-scroll-lock

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

Body scroll is not blocked on IOs #206

Open alexanderKhvostov opened 3 years ago

alexanderKhvostov commented 3 years ago

Hi, sorry but it doesn't work :( I still can sometime scroll body. Maybe Apple again has changed something?

Iphone 11pro IOs 13.6. https://www.loom.com/share/9fe89fe098e64e64a26d5533f9921f29

jvitela commented 3 years ago

Hi, @alexanderKhvostov you have a look at this pull requests and see if it works for you: https://github.com/willmcpo/body-scroll-lock/pull/207

horaklukas commented 3 years ago

I experience the same issue at least on iOS 12 😕

The PR #207 is not helpful, settings overflow: hidden is not a solution.

jvitela commented 3 years ago

Hi @horaklukas,

Can you please elaborate how did you test PR #207 ? Did you inspect the dom to make sure overflow: hidden was actually applied to the body element?

yoonjaepark commented 3 years ago

Hi @jvitela

In some cases, the scroll has arrived at the bottom of the scroll element area. If there is a scroll in the content area, the scroll of the content moves.

<body>
  // scroll content
  <div>
  </div>
  // scroll popup element 
  <div>
  </div>
</body>
arthurzhukovski commented 3 years ago

@jvitela unfortunately this doesn't help. Since OP haven't provided much details I'd like to elaborate on when this bug might be seen. There're two conditions required for this bug to happen:

  1. Safari's toolbar (which is located on the bottom of the screen) must be hidden
  2. User's finger must be placed on the bottom of the screen

If these two conditions are met and user starts scrolling, it will happen.

If finger is being put on any other place of the screen or when the toolbar is shown, everything works as expected. I believe this bug is caused by some Safari internals and nothing can be done for now.

chendong-xie commented 3 years ago

@JonesTwink

hi，did you solve it?

jvitela commented 3 years ago

Hi @chendong-xie and @JonesTwink,

Yes, my last change fixes this issue. Setting position:fixed forces the browser to display the toolbar and therefore there is no scrollable area.

Please do test the latest changes of the feature branch and confirm if it also works for you. The examples are updated so you don't need to rebuild it yourself.

chendong-xie commented 3 years ago

hi @jvitela this way looks ok, thank you for your reply. when you plan to release this feature?

jvitela commented 3 years ago

hi @chendong-xie,

when you plan to release this feature?

That question should be answered by @willmcpo

n19htz commented 3 years ago

Hi @chendong-xie and @JonesTwink,

Yes, my last change fixes this issue. Setting position:fixed forces the browser to display the toolbar and therefore there is no scrollable area.

Please do test the latest changes of the feature branch and confirm if it also works for you. The examples are updated so you don't need to rebuild it yourself.

if you solving it with position: fixed you gotta be aware of scroll reset, i e for example you clicking a button that opens modal and that button is at middle of document (i e scrollTop > 0). Than when you lock the scroll with forcing safari to show bottom bar (by setting position:fixed) your scroll is gonna reset (scrollTop === 0)

jvitela commented 3 years ago

@n19htz Do you mean this? https://github.com/jvitela/body-scroll-lock/blob/3b7877b77c997751ff484a5f89ca2eeb5fda1bed/src/bodyScrollLock.js#L120

n19htz commented 3 years ago

@n19htz Do you mean this? https://github.com/jvitela/body-scroll-lock/blob/3b7877b77c997751ff484a5f89ca2eeb5fda1bed/src/bodyScrollLock.js#L120

yes, i've tried 4.0.0-beta version and scroll restoration does not work there

jvitela commented 3 years ago

@n19htz Could you please provide a minimal reproducible example? or in case it happens with the included examples a video showing the issue would be great and please indicate the browser and OS versions.

n19htz commented 3 years ago

iOS 14.5

https://user-images.githubusercontent.com/39006390/127184638-75b0282e-e99b-4f1a-9b32-56af224ec8a4.mp4

pawelbujna commented 3 years ago

I have a quetion, will this fix also fix the problem with jumping layout when clicking on inputs inside modals? I know that position: fixed casues the bug it happens only on scrollable elements. To fix my case i had to completely hide the page contents and display only a modal. Feels like it could be part of this bug.

Example video:

https://user-images.githubusercontent.com/7709957/127474305-2afbe204-73c1-4589-b370-6b4c0516c3a3.mov

Trendymen commented 3 years ago 
const { scrollY, scrollX, innerHeight } = window;
    document.body.style.position = 'fixed'; 
    document.body.style.top =  -scrollY;   //Mabye there and next line should be add + "px" in the end.
    document.body.style.left = -scrollX;
jvitela commented 3 years ago

Hi @Trendymen and @pawelbujna,

Please check https://github.com/willmcpo/body-scroll-lock/pull/229

rick-liruixin commented 1 year ago

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.