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

user_1771849 0
Viewed 877

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.

enter image description here

mobile-safari scroll javascript
2 Answers

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:

user_89671220

Safari on iOS has a so-called overscoll/bounce effect. You can eliminate the effect by using position:fixed on the body. Disadvantage is that the bottom navbar appears again, but at least the following code prevents scrolling of the red area.

In your css, set the width of the body:

body {
  font-family: sans-serif;
  width:100vw;
}

Then in you javascript, add position:fixed on touchstart, remove it on touchend, like so:

document
.getElementById("noScrollArea")
.addEventListener("touchstart", (e) => {
    e.preventDefault()

    var height = document.body.clientHeight;
    document.body.style.height = height + 'px';
    document.body.style.position = 'fixed';
});
document
.getElementById("noScrollArea")
.addEventListener("touchend", (e) => {
    e.preventDefault();
    document.body.style.height = 'initial';
    document.body.style.position = 'initial';
});

I hope this helps you in the right direction...

user_22884760
Related