Scrolling problems in mobile Safari, how to solve?

Question

css

Hello, tell me how to solve the problem with scrolling in mobile safari.
The page has a layer that covers the page in full screen with its own scrolling, for smooth scrolling I add -webkit-overflow-scrolling: auto to this layer; it causes a problem. When the layer has scrollTop=0 and you try to scroll above the scroll, go to body. even though body doesn't have scroll. How to ban it? Because of this, the focus from the layer is lost and when you try to scroll, the content in the layer freezes, as the body scrolls. Also, because of this, there is a problem with the buttons, you have to press them twice, the first press returns focus to the layer.
Chrome has overscroll-behavior: contain; which allows you to disable scrolling of other parent layers if the scroll ends and the user scrolls further.

Answer 1

You can use the fix-scroll library to work with native scrolling.
Also read the section Preventing , it describes the problem and solutions with scrolling in iOS.

Answer 2

When showing your overlay layer, disable scrolling for the body.
Or for body, when you show your overlay screen, set position: fixed - and there will be no scrolling)

Answer 3

Try the body-scroll-lock library . In addition, it locks the disappearance of the toolbar when scrolling in Safari on iOS 15.
Read this issue before using:  https://github.com/willmcpo/body-scroll-lock/issues/236 . The main thing is that it says that the scrolling feature will not go into Safari iOS 15 if you install the library via NPM, but if you download from GitHub everything will be OK.
Video example of the problem and solution:
- Before using the library (pain):
https://truewebstories.ru/sites/default/files/0my_...
- After:
https://truewebstories.ru/sites/default/files/0my_. ..