「なんかこう・・ｼｭｯって感じでスクロールアニメーションさせたい」

随分前にReact/Reduxの開発をやっていた時期にも同じ台詞を聞いたのですが、この台詞を再度聞く事になるとは思いませんでした。

自分が関わっているプロダクトではjQuery2系が余裕で現役です。手早く実装しようとすると「animateメソッドで特定の箇所までbodyを動かす」という実装に走りがちなのですが・・案の定パフォーマンス上で問題が生じたので対策を考えることにしました。

考えた対策

思い浮かんだのはこの3つです。

タイトルで言っちゃってますが、結果的には3つ目の方法を選択しました。とはいえ、せっかくなので他の2つにも触れようと思います。

requestAnimationFrameで自力実装

僕は基本的に自力フルスクラッチを好む人間なので、まず自力実装を検討してみました。しかし、今回は自力実装はしない方針にしました。理由は以下の通りです。

今回実現したい要件として「イージングをつけたスクロールをしたい」があります。

イージングの動きを自力で実装するのはなかなか大変です。多くの人が一度は耳にした事があるであろうベジェ曲線との戦いは避けられません。イージングの種類を増やしたいという要望が増えれば、自力実装は雪だるま式に増えていく未来が今から見えています。

メンテしていくのも面倒だし、他の誰かにそれをメンテナンスさせるのも嫌だったので、今回は自力実装はしない方針にしました。

※余談ですが、ベジェ曲線に入門したい方は以下のリンクがおすすめです。

個人的興味はあったんですが、これも早々に諦めました。ブラウザ互換性がまだまだで、Safariの対応が無かったことが大きな理由です。

弊社プロダクトのユーザの半分がiPhone、つまりSafariユーザなのでPolyfillは絶対に必要です。Polyfill併用の運用もなかなかに手間だと考え、導入は見送りました。

選んだ手段はこれでした。選定基準は以下の通り。

この辺りを踏まえつつ、↓のリンクを参考に選定したのがanime.jsでした。

実装例のサンプルがやけに充実しているので、興味のある方は是非に。

ボタンを押すと画面最上部まで戻るだけのデモです。

jQueryに依存しないコードを書いたら、古めのChromeやSafariで動かない地雷を踏み抜いたので、その辺の対応が入っています。

「動かなくない？？」という方がいれば、コメントして頂ければ幸いです。

古めのChromeやSafariで動かなかった時に参考にしました。

結局のところ、比較的新しいのモバイル環境であれば「scrollingElement」をつかうで良いと思います。PCの場合がIE11を想定した分岐処理が必要にはなるでしょう。