iOS 15 safari toolbar now hides when scrolling within an element

user_845294 0
Viewed 1271

On iOS 15 scrolling within an element causes the window to resize / toolbar to disappear, regardless of if you have the top or bottom toolbar. On iOS 14 this would only happen when the body scrolled. See gifs below, note - the yellow area is a div with overflow scroll and the body is not scrolling.

iOS 15

iOS 15

iOS 14

iOS 14

Code example here: https://codesandbox.io/s/ios15-scroll-example-u7toi

Is this new behaviour intended or a bug? Is there any way to disable it as it makes quite a few websites look a little strange now!

ios15 safari scroll user-interface
1 Answers

I solved this problem for my case. Perhaps it will help you too.

body-scroll-lock library https://github.com/willmcpo/body-scroll-lock

Video examples of work

Before using the library (pain): https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/before.MP4

After: https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/after.MP4

I block everything except the "burger menu" (side menu) from scrolling after that menu is opened. When the menu is closed, all scroll locks are released.

Thanks willmcpo https://github.com/willmcpo and google translate...

PS: Read this issue https://github.com/willmcpo/body-scroll-lock/issues/236 It says that if you install the library through NPM, the problem will not be solved. You need to download it from GitHub - then it will be OK.

user_168136420
Related