【CSS Modules】scroll-padding-inline-endプロパティの使い方

scroll-padding-inline-endプロパティは、スクロールコンテナがスクロールスナップ位置にスナップする際に、ビューポートの論理的なインライン方向の終端にパディング（余白）の値を保持するプロパティです。

このプロパティは、CSSのスクロールスナップ機能を利用する際に特に重要です。スクロールスナップとは、ユーザーがスクロールしたときに、特定の要素が自動的にビューポート（表示領域）の特定の場所にピタッと揃うように調整される機能のことです。

scroll-padding-inline-endを設定すると、スクロールスナップの目標位置から、論理的なインライン方向の終端側（例えば、英語のように左から右へ進む言語では右側、アラビア語のように右から左へ進む言語では左側）に、指定した分の余白が追加されます。これにより、コンテンツがスクロールスナップの目標位置に揃った際に、そのコンテンツの一部が固定されたヘッダーやフッター、サイドバーなどの要素によって隠れてしまうのを防ぎ、常に視認性を確保することができます。

「inline-end」という用語は、テキストの書き込み方向や言語の方向性に基づいて決まる論理的な概念を表します。たとえば、横書きで左から右へ読む言語（多くのウェブサイトで一般的）の場合、inline-endはビューポートの右端を指します。一方、縦書きの場合や、右から左へ読む言語の場合は、異なる物理的な位置に対応します。このプロパティに指定できる値は、pxやremなどの長さ単位、またはパーセンテージです。この設定により、ユーザーはスクロールする際に目的のコンテンツを快適に閲覧できるようになります。

Copy
1.selector {
2  scroll-padding-inline-end: <length-percentage>;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません