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. Code: <!--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; }
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. Code: $(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"); } } );