【効かない?】CSS「scroll-behavior」の使い方・対応ブラウザを分かりやすく解説!

scroll-behaviorについて知りたい人

scroll-behaviorについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

scroll-behaviorを利用すると、簡単にページ内のスクロールのすべてがスムーズになります。

今まではJavaScriptやjQueryのプラグインで実装していましたが、scroll-behaviorのおかげで簡単に実装できるようになりました。

そこでこの記事ではscroll-behaviorについて解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

scroll-behaviorの評価

頻出度

(1.0)

重要度

(1.0)

総合評価

(1.0)

scroll-behaviorプロパティはボックスにスクロール時の動きを指定する際に利用します。

これを利用することでアンカーリンクからの遷移時に、なめらかな動きでアンカー部分へ遷移できます。

値の指定方法は以下の通りです。

{ scroll-behavior: 値; }

初期値はautoとなり、通常のユーザーが実行するスクロールには影響しません。

scroll-behaviorはブラウザ制限のないWebサイトであれば、とても簡単にスムーズスクロールを実装できます。

現時点ではIEやSafariでは非対応のプロパティです。

それではscroll-behaviorの使い方をみていきましょう。

スムーズスクロールをさせたいブロック要素に指定をするだけでscroll-behaviorが使うことができます。

以下のようにすることでスクロールするボックスがスムーズにスクロールします。

html {
 scroll-behavior: smooth;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!

scroll-behaviorが効かない場合はどうすればいいでしょうか?

そのような場合、ブラウザを疑う必要があります。

現時点でscroll-behaviorプロパティは、いまだ対応していないブラウザがあります。

上記のなかでiPhoneのSafariが使えないのは少々きついですね。

しかし、JavaScriptを使わずとも、手軽にページ内リンクのスムーズスクロールができるとは素晴らしいですね。

是非scroll-behaviorを利用してみてはいかがでしょうか!?

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント