お前、一体何回カルーセル処理のプログラム作ってんねん！！！
というセリフが聞こえてきても、今回もカルーセル処理を手作りしてしまいました。
毎回、作り終わった後で、なんか触り心地が悪いな〜と思ってしまうので、
また次に改良版を作ってしまうという、サイクルに入っている状態です。
今回は、その中の機能でブラウザ依存の機能で少しだけ絶望したので、どこにもぶつけることができないこの衝動をブログにぶつけたいと思います。
スクロールイベントの怪
カルーセル処理でいつも悩むのがスクロール処理です。 マウスやキーボード操作（スマホではドラッグ）で横スクロールすることができるようにするのが、カルーセル（スライダー）処理ですが、 スクロールしたタイミングで、画面中央に設置したり、 ページャーと呼ばれる、スクロールしたに固定で配置されている丸ポッチの色を変えたり、 カーソルと呼ばれる左右の１つだけ移動するボタンを押した時に、スライドさせたり、 何もしなければ、自動的にスクロールさせたりと、まあまあ機能も多く、 でもそれらの多くの場合がスクロールイベントで判定させるのが最善です。 でも、スクロールって、マウスやドラッグで行う能動スクロールと、ページャーやカーソル（またはオート移動）による自動スクロールがあり、 それぞれ制御が変わってくるので、プログラミングがより複雑になっていきます。 自動スクロールはイベントでセットしたフラグをOFFにして操作すればいいのですが、やはり能動スクロールは、スクロールイベントを利用するしかありません。 実際に作ったことがある人であれば、わかると思いますが、これが本当に複雑怪奇なんですよね。 何が複雑なのかというと、カルーセル処理は多くの場合、無限スクロールというのを実装しないといけなくて、これがなかなか難しいヤツなんですよ。 だって、手前の要素を削除したら、削除した分、スクロール値が変わるじゃないですか。 そしたら、変わった分のスクロール値を調整すると、それがスクロールイベントが発動して・・・ この繰り返しになります。 もはやフラグ制御をちゃんとできないとまともに作れないんですよね。救世主のscrollendイベント
スクロール途中で、要素の入れ替えを行なっていた時もありましたが、どうしても安定動作させるために、スクロールが終わってから要素の入れ替え処理をするのが最善です。 こうした処理で、Webエンジニアは、下記のコードを乱用してきました。Element.addEventListener("scroll", handle_scroll)
function hundle_scroll(){
ifscroll_end_timer){clearTimeout(scroll_end_timer)}
this.scroll_end_timer = setTimeout(scroll_end_proccess, 100)
}
function scroll_end_proccess(){
何かしらの処理
}
上記は、スクロールイベントが終了した（スクロールの操作が終わった）時に、scroll_end_proccess()関数を実行すると言うイベントセットから発火して実行までの処理です。
setTimeoutとclearTimeoutを繰り返して、イベントが終わった時に、生き残っているsetTimeoutが実行されると言うかなり原始的な処理です。
でも、この処理をブラウザ側で新しいイベント処理が加わりました。（加わったのは結構前なんですけどね・・・）
それが、scrollendイベントです。
上記のような処理をしなくても、スクロールが終わった事をイベントとして発火してくれます。
リファレンスページ : MDN「Element: scrollend イベント」
100msで判定していた上記のコードに対して、かなり敏感に判定してくれるscrollendイベントは、非常に使いやすく、
これでええやん！と思って実装した直後、それは判明しました。
Safari全部ダメやんけ〜！！！！
というわけで、safariがダメと言うことは、iphoneで実現不可能という意味です。
0 件のコメント:
コメントを投稿