スクロールで色相が変わる機能がちょっと変わった。連続で変わらないよう、2000ミリ秒待つようにした。発火時間はentries[0].timeで取得できるので、低コストで待てる。同じコードで、再読み込みした時や戻った時にスクロールが起きて色相が変わるのも抑制できた。このtimeについては、その基準がtime originとしてHigh Resolution Time Level 2仕様で定義されている。
具体的に基準はページを読み込もうとした時(など)になる。Intersection Observerでは、コールバック関数の引数にtimeとして要素の出入り時間を設定してくれる。ストップウォッチのラップ機能が近いかもしれない。ページを開いている間はずっと動き、タブを裏側にしても動き続ける。ブラウザーを開いたまま、パソコンやスマフォをスリープしても動き続ける。
onscrollの代わりにIntersectin Observerを使う場合、このtime、isInterseting、insersectionRatioの3つの引数でほぼ書けることがわかってきた。やることがはっきりした引数なので、コールバック関数内で色々せずに済むのもパフォーマンスにおいて有利に働く。他の引数を使うようなコードになった場合は、ルートや監視対象の工夫を先に考えた方がいい。
色相を変えるスクリプトでは、prefers-reduced-motionを見て、アニメーションを抑えている場合は変えないようにもした。色を変えることがモーションかどうかは微妙なところだが、目への負担を減らす機能と考えると、止めるべきだと思う。