1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. scroll-padding-inline

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

scroll-padding-inline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.

scroll-padding-inline は一括指定プロパティで、要素のインライン方向のスクロールパディングを設定します。

試してみましょう

scroll-padding-inline: 0;

scroll-padding-inline: 20px;

scroll-padding-inline: 2em;

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">スクロール »</div>
</section>

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

構成要素のプロパティ

このプロパティは次の CSS プロパティの一括指定です。

構文

css
/* キーワード値 */
scroll-padding-inline: auto;

/* <length> 値 */
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

/* グローバル値 */
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: revert;
scroll-padding-inline: revert-layer;
scroll-padding-inline: unset;

値

<length-percentage>

スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。

auto

オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象スクロールコンテナー
継承なし
パーセント値スクロールコンテナーのスクロールポートに対する相対値
計算値一括指定の次の各プロパティとして
アニメーションの種類計算値の型による

形式文法

scroll-padding-inline = 
  [ auto | <length-percentage [0,∞]> ]{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

仕様書

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-padding-inline

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content