Lism Tips

has--snap（スクロールで止まる位置）

has--snap は、スクロールを止めたときに中の要素がきりのよい位置でぴたっと止まるようにするクラスです。3つの変数で調整します。

has--snap は、スクロールしたときに、中の要素がきりのよい位置でぴたっと止まるようにするクラスです。

スクロールスナップとは#

スクロールスナップ（scroll snap）は、ブラウザの CSS の機能です。スクロールを止めると、中途半端な位置で止まらず、近くの要素の端などに吸いつくように止まります。スマートフォンの写真アプリで、1枚ずつめくれる動きに近いものです。

CSS では、スクロールする箱に scroll-snap-type を、中の要素に scroll-snap-align（どこで止まるか）と scroll-snap-stop（飛ばしてよいか）を書きます。has--snap は、これらを CSS 変数でまとめて指定できるようにします。

どんなときに使う？#

  • 画像やカードを横に並べて、スワイプで1つずつ見せたいとき（スライダーのような見せ方）
  • 縦に長いページを、1画面ずつ区切って見せたいとき

使い方#

スクロールする箱に has--snap を付けます。箱には、はみ出した中身をスクロールさせる指定（ここでは -ov-x:auto）も要ります。下の箱を横にスクロールしてみてください。

表示例

1つめ
2つめ
3つめ
html
<div class="l--flex has--snap -ov-x:auto -g:10" style="--snapType: x mandatory">
  <div class="-fxsh:0 -w -p:30 -bgc:base-2" style="--w: 80%">1つめ</div>
  <div class="-fxsh:0 -w -p:30 -bgc:base-2" style="--w: 80%">2つめ</div>
  <div class="-fxsh:0 -w -p:30 -bgc:base-2" style="--w: 80%">3つめ</div>
</div>

-fxsh:0 は flex-shrink（縮む度合い）を 0 にして、中の要素が縮まないようにする指定です。

専用の変数#

変数 役割 初期値
--snapType 箱の scroll-snap-type の値 both mandatory
--snapAlign 中の要素の scroll-snap-align の値 start
--snapStop 中の要素の scroll-snap-stop の値 normal

値の意味（CSS 一般）は次のとおりです。

値の例 意味
x・y・both 横・縦・両方の向きで止める
mandatory かならず止まる位置へ吸いつく
proximity 近いときだけ吸いつく
start・center・end 要素の始まり・真ん中・終わりで止まる
normal・always 勢いよくスクロールしたとき、飛ばしてよい・1つずつ止まる

しくみ#

css
.has--snap {
  --snapType: both mandatory;
  --snapAlign: start;
  --snapStop: normal;
  scroll-snap-type: var(--snapType);
}
.has--snap > * {
  scroll-snap-align: var(--snapAlign);
  scroll-snap-stop: var(--snapStop);
}

--snapAlign と --snapStop は、すぐ内側の要素（> *）に効きます。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧