CSSの厳選小技②

CSSの便利すぎる小技を紹介

①に引き続き、今回も意外と知られていないかつ、便利すぎる小技を紹介していきます。
そして今回は、「スクロール」の小技に厳選しています。
それではみていきましょう！

スムーズスクロール

ページ内リンクをクリックすると、リンク先へスルッと移動するもの！
これまではJSで実装してましたが、その必要なし！
そしてコードの記載もめちゃくちゃ簡単です。

html{
 scroll-behavior: smooth;
}

これだけ！！めちゃくちゃ便利で快適なWebページが作成できます。
ただ、残念な点があるとしたらIEとSafariが非対応とのことです。

スクロールスナップ

スクロールしたときにピタッと各エリアを表示させたいときに使うものです。
JSなしでスクロール位置を調整してくれます。
高さを100vhにすることでフルスクリーンレイアウトとして表示もできちゃいます。

<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
  <section class="area">3</section>
  <section class="area">4</section>
  <section class="area">5</section>
</div>

.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
}

簡単ですね。こんな感じで１２３４５のそれぞれのページにピタッと止まります。
なんて便利なんだ…。

スクロールした時に要素を固定にする

ページをスクロールした時に、次の要素に到達するまで、指定した要素が固定表示されるものです。
文章量が多いコンテンツに重宝しそうです！

<section>
  <h2>概要</h2>
  <p>コンテンツ内容………</p>
</section>

h2 {
  position: sticky;
  top: 0;
}

上記だと、h2クラス全てのものが固定されます。
これも便利！！！

結論

JSを必要とするものがどんどん必要でなくなってきています。
JSも大変重宝しますが、CSSのコード１行で済むならそっちの方がいいですね
可読性も上がりますし、メリットだらけです。
また発見したら書き込みます！