CSSのscroll-snapは、カルーセル機能を簡単に実装できる便利なものだが、実際にウェブサイトで活用しようとすると、ひとつ大きな問題に直面する。

それは、コード的に現在表示されている位置の把握が容易ではない点である。

例えば、10個の要素が入っているカルーセルがあるとして、現状はスクロールされて3個目が中央に表示されている場合に、それをユーザーに伝えるためのUIを実装したいとする。この「3個目」ということを知るにはCSSだけではどうにもできず、Javascriptでそこそこ面倒なコードを書かなければならない。

これをコードで確認する場合、コンテナのscroll-snap-typeがstart・center・endのどれが設定されているかやコンテナの幅、各アイテムの幅が一定か不定か、横スクロールか縦スクロールか、scroll-paddingの設定はあるかどうか、そういった設定可能な各要素を念頭において処理しなければならないので意外と厄介だ。

そこで、今後、汎用的に使えるように考慮した、scroll-snapにおける現在地取得のための関数『$getSnapPosition()』を自分のJavascriptライブラリ『klib』に追加してみた。

この関数の仕様としては、scroll-snapのコンテナノードかid値を引数として渡すだけで、現在スナップしている要素番号を0～の整数として返すという汎用性の高いシンプルなものである。

上のサンプルは、スクロールさせて確認ボタンを押せば、現在地をアラート表示するように設定してある。

こちらのサンプルは、取得した現在地番号を活用して、全体数／現在地を表示するUIを実装した応用タイプである。

処理内容の概要は以下の通り。
❶コンテナのonscrollイベントで現在地表示UIの状態を更新させる
❷$getSnapPosition()で現在地番号を取得
❸現在地表示UIの各要素のclassを変更 → CSSのtransitionで動く
❹各要素に直接移動できるようにUIに$setSnapPosition()を適用している

ちなみに、上記のコード内にある$setClassSomeone()もJavascriptライブラリ『klib』に入っている関数で、ある特定のグループ内の任意のひとつにclassを設定する機能を持っている。この例では、UIの現在地ひとつだけにclass=“usethis”を設定している。択一の動作をするラジオボタン的UIを実装したい場合には大いに活躍する関数である。

$getSnapPosition()関数自体は100行程度のJavascriptコードになっている。毎回、プロジェクトごとにこうしたコードを書くことも可能だが、汎用性の高いコードを用意しておけば、実際のプロジェクトで書くコード量は上記のようにたった数行で済ますことができてしまう。

私は時間がとれると、実際のプロジェクトで思いついたアイディアや応用できそうな機能を汎用可能な関数としてklibに継続的に追加している。現在は267種類の関数の集合体にまで成長し、自分がコーディングする際にはもはや欠かすことのできない存在と云えるほど有用なJavascriptライブラリとなっているので、誰でも自由に使えるように配布しようかと考えることもあるのだが、それには参照用のマニュアルを作成しないと意味が無いので実現には至らずにいる。もちろん、自分用のマニュアルはあるのだが、分かりやすく作り直すのはあまりに膨大な作業で、結局はいつも先送りにしてしまう。

そのため、気が向いたらこうして部分的に紹介して、気になった人に簡単に使ってもらうのも良いのかなと考えている。

➤ Javascriptライブラリ：klib ダウンロード

【$getSnapPosition()の仕様】
[書式例] var num = $getSnapPosition(‘container1’);
○第1引数にコンテナのノードオブジェクトかid値を渡す。
○コンテナ内の各アイテムは<div>をデフォルト想定。それ以外のタグの場合には第2引数にタグ名を渡す。
○scroll-snap-typeの方向設定は、xかyのどちらかで自動判別。bothには未対応。
【$setSnapPosition()の仕様】
[書式例] $setSnapPosition(‘container1’,3);
○第1引数にコンテナのノードオブジェクトかid値を渡す。
○第2引数にスクロール先のアイテム番号(0～)を整数で渡す。
○コンテナ内の各アイテムは<div>をデフォルト想定。それ以外のタグの場合には第3引数にタグ名を渡す。
klibは自己責任の範囲で誰でも使用可能。ただし、コードに関するいかなる権利も放棄しないものとする。