coding

javascript

Scroll Behavior not working on Safari

Instructions about how to fix scroll behavior not working on safari

/Scroll%20Behavior%20not%20working%20on%20Safari

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' });
}