Instructions about how to fix scroll behavior not working on safari
I was developing a card scroller and everything was fine until I tested it in safari.
Initially I just used the css property scroll-behavior: smooth;
and it worked fine in chrome but when I tested in safari it didn’t work.
The reason is that scroll-behavior: smooth;
is not supported in Safari yet.
The solution was to import the Polyfill with npm, in my case I was working with angular2+.
npm install smoothscroll-polyfill
npm install @types/smoothscroll-polyfill
Then in the component where I intended to use it
import * as smoothscroll from 'smoothscroll-polyfill';
constructor() {
smoothscroll.polyfill();
}
scrollFunction(event:any) {
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
}