CSSの「scroll-padding-inline-end」とは？わかりやすく解説！

scroll-padding-inline-end の利点は以下の通りです。

ユーザーエージェントによる自動調整
オフセット値をautoに設定すると、ブラウザが適切な値を自動的に調整します。
コンテンツと端の間に余白を作る
コンテンツとスクロールポートの端の間に余白を作ることで、読みやすくレイアウトを調整できます。
固定要素によるコンテンツの隠蔽を防ぐ
スクロールバーや固定サイドバーなどの要素が、コンテンツの一部を隠してしまうのを防ぎます。

scroll-padding-inline-end の構文は以下の通りです。

scroll-padding-inline-end: <length-percentage> | auto;

auto: ブラウザが適切な値を自動的に調整します。
<length-percentage>: 有効な長さまたはパーセンテージ値。例えば、10px、2em、50%など。

例

以下の例では、スクロール領域のインライン終端側に20pxの余白を設定します。

.scroll-container {
  scroll-padding-inline-end: 20px;
}

scroll-padding-inline-end は、インライン方向の終端側のみを対象としています。始端側の余白を設定するには、scroll-padding-inline-start プロパティを使用する必要があります。
scroll-padding-inline-end は、比較的新しいプロパティであり、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、互換性の問題が発生する可能性があります。

例 1: スクロール領域の終端側に余白を設定

この例では、 .scroll-container クラスに scroll-padding-inline-end: 20px を設定し、スクロール領域の終端側に20pxの余白を設定します。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  overflow-x: auto;
  scroll-padding-inline-end: 20px;
}
</style>
</head>
<body>
<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, mi ut tincidunt tincidunt, lectus nisl ullamcorper purus, sit amet semper nunc quam eget velit. Donec ullamcorper nulla non metus bibendum, sit amet ullamcorper lectus tincidunt. Sed semper orci eget quam rhoncus, ac ullamcorper quam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum turpis eu leo tincidunt, vitae tincidunt sem sodales. Nullam at quam quis ligula consectetur semper. Sed ac enim eget quam ullamcorper hendrerit.</p>
</div>
</body>
</html>

例 2: ブラウザが自動的に余白を調整

この例では、 .scroll-container クラスに scroll-padding-inline-end: auto を設定し、ブラウザが適切な余白を自動的に調整するようにします。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  overflow-x: auto;
  scroll-padding-inline-end: auto;
}
</style>
</head>
<body>
<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, mi ut tincidunt tincidunt, lectus nisl ullamcorper purus, sit amet semper nunc quam eget velit. Donec ullamcorper nulla non metus bibendum, sit amet ullamcorper lectus tincidunt. Sed semper orci eget quam rhoncus, ac ullamcorper quam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum turpis eu leo tincidunt, vitae tincidunt sem sodales. Nullam at quam quis ligula consectetur semper. Sed ac enim eget quam ullamcorper hendrerit.</p>
</div>
</body>
</html>

例 3: スクロール領域の始端側と終端側に余白を設定

この例では、 .scroll-container クラスに scroll-padding-inline-start: 10px と scroll-padding-inline-end: 20px を設定し、スクロール領域の始端側に10px、終端側に20pxの余白を設定します。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  overflow-x: auto;
  scroll-padding-inline-start: 10px;
  scroll-padding-inline-end: 20px;
}
</style>
</head>
<body>
<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, mi ut tincidunt tincidunt, lectus nisl ullamcorper purus, sit amet semper nunc quam eget velit. Donec ullamcorper nulla non metus bibendum, sit amet ullamcorper lectus tincidunt. Sed semper orci eget quam rhoncus, ac ullamcorper quam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum turpis eu leo

paddingとmarginの組み合わせ

従来の padding と margin プロパティを組み合わせて、同様の効果を実現することができます。以下の例では、.scroll-container 要素に左右の余白を設定し、疑似要素を使用してスクロール領域の端側に余白を追加しています。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  overflow-x: auto;
  padding: 0 20px; /* 左右に20pxの余白を設定 */
}

.scroll-container::after {
  content: "";
  display: block;
  height: 100%;
  width: 20px; /* スクロール領域の端側に20pxの余白を追加 */
  background-color: transparent;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
</head>
<body>
<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, mi ut tincidunt tincidunt, lectus nisl ullamcorper purus, sit amet semper nunc quam eget velit. Donec ullamcorper nulla non metus bibendum, sit amet ullamcorper lectus tincidunt. Sed semper orci eget quam rhoncus, ac ullamcorper quam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum turpis eu leo tincidunt, vitae tincidunt sem sodales. Nullam at quam quis ligula consectetur semper. Sed ac enim eget quam ullamcorper hendrerit.</p>
</div>
</body>
</html>

flexbox

Flexbox レイアウトを使用して、コンテンツをスクロール領域内に収め、端側に余白を設定することができます。以下の例では、.scroll-container 要素を flex コンテナとして設定し、justify-content: space-between プロパティを使用してコンテンツを左右に端寄せしています。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  display: flex;
  overflow-x: auto;
  justify-content: space-between;
  align-items: stretch;
}
</style>
</head>
<body>
<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, mi ut tincidunt tincidunt, lectus nisl ullamcorper purus, sit amet semper nunc quam eget velit. Donec ullamcorper nulla non metus bibendum, sit amet ullamcorper lectus tincidunt. Sed semper orci eget quam rhoncus, ac ullamcorper quam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum turpis eu leo tincidunt, vitae tincidunt sem sodales. Nullam at quam quis ligula consectetur semper. Sed ac enim eget quam ullamcorper hendrerit.</p>
</div>
</body>
</html>

grid layout

Grid layoutを使用して、コンテンツをスクロール領域内に収め、端側に余白を設定することができます。以下の例では、.scroll-container 要素を grid コンテナとして設定し、column-gap プロパティを使用してコンテンツ間に余白を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* コンテンツを等幅に並べ、左右に余白を設定 */
  overflow-x: auto;
  gap: 20px;

CSSの「scroll-padding-inline-end」とは？ わかりやすく解説！

例 1: スクロール領域の終端側に余白を設定

paddingとmarginの組み合わせ

CSSの「scroll-padding-inline-end」とは？わかりやすく解説！