かめ。ブログ

CSSでできるスクロール周りのこと

2022年7月4日
2022年7月4日

目次

昔はJavascriptを使ってスムーズにスクロールしたり、コンテンツにスナップするようにしていたのですが
最近はcssを少し入れてあげるだけで実変することができます。
どんどん便利になってサイトがお手軽に作れるようになってきていてよいですねっ!

スムーズスクロールとスナップ


スムーズスクロール

html {
 scroll-behavior: smooth;
}


scroll-behavior - CSS: カスケーディングスタイルシート | MDN

スクロールでスナップする


CSS スクロールスナップの基本概念 - CSS: カスケーディングスタイルシート | MDN
scroll-snap-type - CSS: カスケーディングスタイルシート | MDN

スナップするルクロールエリアに下記のcssをつけます。

html {
 scroll-snap-type: y proximity;
}


スナップさせたいコンテンツに下記のcssをつけます。

.contents-item {
 scroll-snap-align: start;
}


カルーセル

スマートフォンでのタップでの横スクロールコンテンツ
この辺りも上のスクロールと合わせてjavascriptなしですんなり実装できるんですね。
(昔はこの辺りjsでガッツリ作ってました。)


overflow-scrolling: touch;便利!って思っていた時もあったけど、
すでにそれすらも指定する必要がなくなっていたのですね。

【CSS】overflow-scrolling: touchが不要になりました | Webデザイン・コーディングに役立つ、TECH LIBRARY

まとめ

どんどんブラウザも進化していって、昔は少し苦労していたこともcssを使ってサクッとできるようになってきて。
webサイトを作るのが楽しくなってきてますねー。

今後も進化してどんどん作りやすくなっていくのかと思うとワクワクですね!
面白いものを色々と作っていきたいです。



関連する記事