React-native-web: Support polyfilling smooth scroll

[kristerkari]

Currently the ScrollResponder module is setting the scrollBehavior CSS property to smooth whenever doing an animated scroll: https://github.com/necolas/react-native-web/blob/c00360491b6f0658ec8f33c2f59349794646b27a/packages/react-native-web/src/modules/ScrollResponder/index.js#L378

The "scroll behavior" feature is not supported by some browsers (e.g. iOS Safari), but there is a polyfill. The polyfill does not have support for polyfilling the CSS property because it seems hacky to add support for it, but works if the smooth scrolling is done with Javascript.

Would it be possible to detect & use the element.scroll method instead of a style inside ScrollResponder? If the method is not supported in some browsers there could be a fallback to the current implementation. Might be of course that there some other reasons why the style property is used currently.

I quickly tested the code below and it fixed the smooth scroll polyfilling, and smooth scrolling started working the same way in iOS Safari as on the native side:

src/modules/ScrollResponder/index.js

-UIManager.updateView(node, { style: { scrollBehavior: !animated ? 'auto' : 'smooth' } }, this);
-node.scrollLeft = x || 0;
-node.scrollTop = y || 0;
+node.scroll({ top: y || 0, left: x || 0, behavior: !animated ? "auto" : "smooth" });

@necolas

[necolas]

That sounds like a good idea and might help with #1173

[brunolemos]

Can confirm this (together with the polyfill) fixes smooth scrolling on both firefox and safari.

[kristerkari]

Great, I opened a PR with the changes from my example:
https://github.com/necolas/react-native-web/pull/1208

Let me know if there is something that I did not take into account in my PR.

[necolas]

Does this fix #1173?

[kristerkari]

I tested the example code from #1173 and the code from my PR in a React Native project, and yes using the .scroll method fixes the issue of horizontal scroll not working.