scroll-snapをつかってスクロールをぴたっと止める 📱

先日、「最新のSafariとChromeで観覧できればOK！」というウェブサイトを実装することになりまして、これはチャンス！ということで、前々から気になっていたscroll-snapを実戦投入してみました。

developer.mozilla.org

JavaScriptを一切書かずに、ぴたっと吸着するのは便利ですね。カルーセルなどに活用できそうです。

DEMO

develop.kimizuka.org

CSS

ol {
  display: flex;
  width: 100%; height: 100%;
  overflow: scroll;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling: touch */
}

li {
  flex: none;
  width: 100vw; height: 100%;
  scroll-snap-align: start;
}

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

当初は慣性スクロールを効かせるために、olに対して-webkit-overflow-scrollingをつけていたのですが、実際試してみると、この程度のスクロールであれば、あってもなくても挙動が変わらないように感じたので外しました。