How to prevent scroll event from the bottom of the screen on iOS Safari

There is a scroll event happening with unknown source when using iOS safari.

To reproduce the issue You can use this link to explore a minimal example of the issue.

https://codesandbox.io/s/frosty-pike-7z6v9?file=/src/styles.css&resolutionWidth=444&resolutionHeight=649

Using an iphone, try to scroll until you get rid of safari bottom nav bar, then scroll in the non scrolling red area at the very bottom edge of the screen.

• What's causing that behaviour (event name) ?
• Can scrolling be prevented using this method with Javascript without extra css ?

Update 1 : While there is no known method to solve this as it seems, force showing the bottom all the time did work for my specific use case.

Can scrolling be prevented using this method with Javascript without extra css?

I fear the answer is simply no. :(

Here's the most meaningful source I could find: https://bugs.webkit.org/show_bug.cgi?id=189586 (~2.5 years ago)

In this source, refer to the section "Level 6: iOS Safari restricted browser area": https://medium.com/turo-engineering/ios-mobile-scroll-in-web-react-1d92d910604b

Another: https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/

References made in issues from the body-scroll-lock library:

• https://github.com/willmcpo/body-scroll-lock/issues/211#issuecomment-761564904
• https://github.com/willmcpo/body-scroll-lock/issues/82 (where I found the webkit bug)
• More generally, just searching open issues with "scroll" adds a lot of supplemental information that all seems to arrive back at the answer of no, sadly preventing scroll does not work in iOS Safari when the menu bar is hidden.