overscroll-behavior-inline
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.
overscroll-behavior-inline は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。
全体的な説明は overscroll-behavior を参照してください。
構文
css
/* キーワード値 */
overscroll-behavior-inline: auto; /* 既定値 */
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 |
|---|---|
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
overscroll-behavior-inline =
contain |
none |
auto
例
インライン方向のオーバースクロールの抑止
このデモでは、一方がもう一方の中にある 2 つのブロックレベルボックスがあります。外側のボックスは広い 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,
transparent 0px,
transparent 19px,
rgb(0 0 0 / 50%) 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,
transparent 0px,
transparent 19px,
rgb(0 0 0 / 50%) 20px
);
}
p {
padding: 10px;
background-color: rgb(255 0 0 / 50%);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
結果
仕様書
| Specification |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |
ブラウザーの互換性
Loading…