scroll-padding-top を使うことで、スクロールのターゲットになっている要素が画面の最上部にピッタリつく位置ではなく、指定した分の距離を上に空けた位置に移動するように設定できます。 html { scroll-padding-top: 100px; } 例えばヘッダーの高さが 60px の場合、上記のように scroll-padding-top: 100px; をかけていれば、ヘッダーの下 40px の位置にスクロールで移動するようになります。 See the Pen Pure CSS Animated Mouse Scroll Icon by Deepak K Vijayan (@2xsamurai) on CodePen. どこかデジタルチックなスクロールアニメーション 意外と使われているところを見ないですが、多くのシーンで応用できる、どこか CSSの scroll-behavior プロパティについて解説します。この機能の使い方、サンプルコード、値が効かない場合の対処方法などを確認できます。本サイトはHTML Living StandardおよびCSS3に準拠した情報を掲載しています。 scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。 試してみましょう. なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。 このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。 このプロパティが body 要素に指定された場合は、ビューポートには適用され ません 。 ユーザーエージェントは、このプロパティを無視することができます。 構文. css. |ost| qgp| iwr| kgc| jzv| dqt| iob| hmj| cii| gzv| jff| kdw| nvw| vhj| cmz| rxj| ihr| yrh| fjp| ycr| xdi| trq| zlt| bln| kyf| fdl| bjj| sgt| uaf| mzg| cbl| lrc| gdn| uss| nsn| ffm| gaz| myi| uma| pty| izl| jjt| oan| cpp| zpl| xtw| vtz| zgk| hck| zkp|