Is there a Safari equivalent for scroll-behavior: smooth;?

Question

I\'m working on a single page portfolio which is navigated using a top-mounted navigation bar using href\'s. I use scroll-behavior: smooth; in my head\'s CSS an

Answer 1

Although it is stated here that safari supports scroll with smooth https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior but even example doesn't work on safari

As a way out, I found a library with a polyfills, and in those browsers where it does not work it's replaced - https://github.com/iamdustan/smoothscroll

Answer 2

Safari does not support scroll-behavior: smooth, you'll need some custom javascript to achieve the same effect. See this: Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari

Answer 3

You can use -webkit-overflow-scrolling: touch;. No javascript required.

Reference: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Edit: as pointed out I misunderstood the question (thanks for the comment). For scroll behavior in Safari there is no scape. You gotta use JavaScript. Here is a vanilla solution:

https://perishablepress.com/vanilla-javascript-scroll-anchor/