安定的に動作するカルーセルライブラリを作りました。
機能としては、横スライドを無限スクロールとしてサポートする、一般的なカルーセルなので、
何の特出した要素もありませんが、これまで作ってきたカルーセル処理を元に、より安定的に動作することを目的に作りました。
この機能を作った経緯
とある会社のWebシステム開発を依頼されて、表示するページの至る所にカルーセルの表示があったので、
既存の使いにくいライブラリではなく、自分でカスタマイズも機能追加も簡単にできる、
安定したツールを事前に作っておこうと思って、これまで作ってきたカルーセルツールを参考に構築しました。
デモ
実際に安定するように作ってみたら、モジュールの量が多かったので、Github pagesにアップしておきました。
https://yugeta.github.io/mynt_slider/sample/
開発ポイント
javascriptを1ファイルでの構成にして、手軽にコピーできるようにしても良かったんですが、
スクロールイベントや、無限スクロールのために、DOMを足したり消したりする操作って、
インターネットブラウザによって、挙動が違うと言うことを開発途中で思い知らされて、
今後の不具合回収や、機能追加などの効率を考えて、オブジェクト指向でクラス分けされた処理の構造にしました。
scroll-snap-align:center;のブラウザ違いについて
scroll-snap-align : center;
このコードをセットしておくと、カルーセルの中のアイテムが表示の中央にフィットしてくれるようになります。
これをセットした状態で、GoogleChromeと、Firefix or Safariで、無限ループの為に、前後（主にprevioue-element）に要素を追加したり削除したりすると、
GoogleChromeの場合は、表示している要素は画面中央の状態で、左右に要素追加されますが、
Firefix or Safariでは、スクロール値が固定なので、手前に要素が追加されていたら、表示が右にずれるし、手前要素を削除じたら、左にずれます。
これにより、ズレた時に再度スクロールイベントが発生して、想定外の挙動につながると言う意味不明のバグに悩まされました。
この事象を回避するには、要素の追加や削除をした際には、画面中央の要素をずらさないように誤差調整をする機能をつけることで、どのブラウザでもスクロールイベントが無駄に発生するのを抑えることができたんですね。
あとがき
普通にホームページ制作するときにも使えるので、今後のWeb開発やホームページ制作の作業が格段に楽になりそうです。
きっと、このツールに、機能追加する要望もたくさん発生する事になることは、容易に想像できるので、
Githubで育てていく事にするとしよう。
0 件のコメント:
コメントを投稿