0

This is my first question in stackoverflow, please let me know if I missed anything important to provide good context to my question. Full disclosure, I have only spent 3-4 hours researching the web for a good, understandable solution.

I recently discovered that browsers on iOS devices do not support behavioral scrolling features (like CSS "scroll-behavior: smooth" or scrollIntoView({ behavior: "smooth" }) ). Is there a practical solution to achieve simple smooth auto scrolling on iOS when you click on a link on the navigation bar? My current implementation works well on Android devices.

I'm using Reactjs, and have tried looking in to npm package react-scroll but I don't think there's any mention of iOS support. I have also looked into the thread Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari, which is a couple of years old. Unfortunately, I don't fully understand the solution (coding newbie here).

Thanks in advance!

JDanielV
  • 1
  • What about this? https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ – avia Sep 08 '20 at 22:42
  • Hello LaurentC, thanks for your reply! I’m actually not looking into momentum scrolling (as in, the page keeps scrolling when you swipe, and gradually stops as if it were some friction). I’m looking for simple, smooth auto scroll to a section when you click on its link in the navigation bar. – JDanielV Sep 08 '20 at 23:07
  • OK got it. So, do you smooth-scrolling for the entire page or to 'jump' from an element to another (example, click a button and goto an anchor ID), etc. – avia Sep 08 '20 at 23:21
  • Hi again! Just to “jump” to sections from the navigation bar. Like clicking on “about” and making the page scroll down to the “about” section, which is below somewhere, already mounted - just to smoothly get there. – JDanielV Sep 08 '20 at 23:30

0 Answers0