はてなブックマーク

ひとりCSS Advent Calendar 2022 13日目です。 scroll-marginとscroll-paddingを使ってみます。 どんなときに便利か たとえばページ上部にヘッダーを固定させて、ページ内スクロールを実装したとき margin padding だとスクロールさせたときにヘッダーとかぶる 頻繁に遭遇する（またか〜…みたいな。） 考慮するの結構面倒だった scroll-padding を使うとヘッダー分の高さを考慮できる scroll-margin より scroll-padding のほうが使うことが多そう 作ってみる <header> <nav> <a href="#1">section1</a> <a href="#2">section2</a> <a href="#3">section3</a> <a href="#4">section4</a> </nav