Elementインターフェース用にscrollToメソッドを実装する

概要

• クリックなどのイベントをトリガーに、とあるelementをスムーズにスクロールしたい
• Elementインターフェースが持つscrollTopではアニメーションを実装できなかった
• scrollToだとやりたいことができるが、windowインターフェースのプロパティなのでflowtypeがエラーを吐く
• scrollToを自前でelement用に自前で実装した。

課題

クリックなどのイベントをトリガーに、とあるelementをスムーズにスクロールさせたい。そういう時はElementインターフェースに実装されているelement.scrollTopを書き換えるという実装することが多いかと思います。 ただscrollTopの書き換えはsmoothスクロールに対応できず、アニメーション付きでスクロールしていくという要件を満たすことができませんでした。 そこで何かないかと調べてみるとscrollToというメソッドが見つかったのですが、これはwindowインターフェースのプロパティなのでFlowなどの型チェックを行っているとエラーを吐きます。 そして途方に暮れた僕。

解決した方法

githubでコードをあさっていると、scrollToを自前で実装しているコードをちらほら見かけました。 最終的に行き着いた実装方法がこちらです gist.github.com

JedWatson/react-selectのanimatedScrollTo function あたりも参考になるかもしれません。 https://github.com/JedWatson/react-select/blob/2654ce0505d9e3820e169109cc413778fc20f843/src/utils.js#L161