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サイトを作るのが楽しくなってきてますねー。
今後も進化してどんどん作りやすくなっていくのかと思うとワクワクですね!
面白いものを色々と作っていきたいです。