タグ

2019年1月18日のブックマーク (1件)

  • 表示領域にピタッと移動!CSSでスクロールスナップを実装しよう

    2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ! ↑私が10年以上利用している会計ソフト! スクロールスナップの基 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね!このデモの構成を見ていきましょう: HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

    表示領域にピタッと移動!CSSでスクロールスナップを実装しよう