overscroll-behavior-inline
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
overscroll-behavior-inline
は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。
全体的な説明は overscroll-behavior
を参照してください。
css
/* キーワード値 */
overscroll-behavior-inline: auto; /* default */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;
/* グローバル値 */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;
構文
overscroll-behavior-inline
プロパティは、次の値の一覧のうち一つのキーワードで指定します。
値
公式定義
初期値 | auto |
---|---|
適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
インライン方向のオーバースクロールの抑止
このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い width
を持っているので、ページは水平にスクロールします。内側のボックスは width (と height
) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。
既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-inline: contain
を設定しました。
HTML
html
<main>
<div>
<div>
<p>
<code>overscroll-behavior-inline</code> has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
</p>
</div>
</div>
</main>
CSS
css
main {
height: 400px;
width: 3000px;
background-color: white;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-inline: contain;
}
div > div {
height: 100%;
width: 1500px;
background-color: yellow;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
p {
padding: 10px;
background-color: rgba(255, 0, 0, 0.5);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
結果
仕様書
Specification |
---|
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |
ブラウザーの互換性
BCD tables only load in the browser