Scroll-snapping behaviours in iPhones

[deanstreet]

I have 3 sections on the landing page. When a user scrolls down from the 1st section, I want it to snap to 2nd-section. The snap-point is start of 2nd section. So the user can then scroll back up or down from 2nd section.

The problem is that for iphones, I can't scroll down to 3rd-section from 2nd because the page keeps snapping back to the snap-point. It works on Android phones or other browsers except iPhones. Please advise.

Below is the overview of the page.

<!--HTML-->
<main id="landing-container">

<main id="page1">
    <section><p>I love Trump's asshole</p>
    </section>
</main>

<main id="page2">
    <section><img src="asshole.jpg">
    </section>
</main>

<main id="page3">
   <section><p>Labradors are angels</p>
   </section>
</main>

</main>


/*css*/
#landing-container {
    scroll-snap-type: y proximity;
    scroll-snap-stop: normal;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100vh;
}

#page1 {
    scroll-snap-align: start;
}

#page2 {
    scroll-snap-align: start;
    overflow: auto;
}

 

[d08]

Isn't this more of a StackOverflow question rather than ET?

 

[deanstreet]

Thank you for your helpful advice and I decided to simply use js to see if the browser is (likely) a Safari and if so disable scroll snapping.

$(document).ready(function() {

var platform = navigator.platform.toLowerCase();
var ios = ["iphone", "ipad", "mac"]; //keyword that should show in navigator.platform if browser is safari
//set boolean to check if device is apple
var safari = 0;
for (var i = 0; i < ios.length; i++) {
  if ( platform.includes(ios[i]) ) {
    safari = 1;
  }
}

if (safari) {
  $("#container").css("scroll-snap-type", "none");
}

}
);