CODEWITHSUNDEEP
javascriptscrollmobile-safari
Antoine Eskaros
Antoine Eskaros

Reputation: 851

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.

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

Upvotes: 2

Views: 2580

Answers (2)

mcy
mcy

Reputation: 291

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:

Upvotes: 2

Klaassiek
Klaassiek

Reputation: 2906

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...

Upvotes: 0

Related Questions