半端にスクロールしたらピタッと合わせてくれる感じのアレ
動作の詳細
ちゃんとした記事を読むのが早い。
扱い方について
対応ブラウザの云々は抜きにして。
妥当な使い方は画面いっぱいに表示する系のコンテンツだと思う。プレゼン資料みたいな感じでページ単位で見せていく感じの。逆に表示領域の一部で収めるのはすごい限定的というか、swiper.jsとかのスライドショーでいいじゃんみたいな。むしろそういうスライドショーのライブラリのほうが動作安定してますよねみたいなところがある、cssに固執しなきゃいいじゃんみたいな、本末転倒。
真価はレスポンシブによるデザインの切り替えにあるのかなと思う。
実際の動作はiframeに似てる。親要素の枠内でどうのこうのだから、ページ全体にscroll-snap-typeを付けるならいいけど、そうじゃなければスクロールバーが2重に出ちゃってかっこ悪い。cssで非表示にしないとダサい。でも、非表示にしたら、スクロール箇所があるってわからないからスクロールバーで遷移されるとギミックがすっ飛ばされる。なかなかピーキーな感じ。
多分使い所は特設ページかスマホ用のデザインだなと思う。
でもって、やっぱりページ全体に効かせるか、そうでもなければページの上下どっちかの端に仕込むしかないような。
スクロール方向を横にしたらスライドショー的な使い方ができるけど最後まで行ったときに反対側に返ってこれないから微妙。やっぱ縦で使うのがいい気がする。適してるのはきっとLPだわね。読み進めていって興味深めていって買わせる、一方通行の立て付けじゃないと扱いきれないというか。
単純にスクロール時のどうのこうのをしたいだけなのになんでよみたいなややこしさがある。特定の状況下で導入できても、これありきでなにか作るってのは面倒が勝つかな。
コメント