CSS overscroll-behavior-inline eigenschap

Definitie en gebruik

overscroll-behavior-inline De eigenschap wordt gebruikt om de scrollketting van het element of de feedback van het overschrijden van de scrollgrenzen uit te schakelen wanneer er geprobeerd wordt om buiten de scrollgrenzen te scrollen in de richting van de lijn.

注意：Om overscroll-behavior in de richting van de lijn te activeren, moet je mogelijk een veeg手势 op het touchpad of het touchscreen gebruiken.

滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。

过度滚动反馈是当用户尝试滚动超出滚动边界时给予的反馈。例如，在移动设备上，当尝试滚动超出页面顶部时，通常会伴随着页面刷新的视觉反馈。

CSS 的 overscroll-behavior-inline 和 overscroll-behavior-block 属性与 overscroll-behavior-x 和 overscroll-behavior-y 属性非常相似，但 overscroll-behavior-inline 和 overscroll-behavior-block 属性依赖于块方向和行内方向。

注意：相关的 CSS 属性 writing-mode 定义了行内方向。这会影响行内方向是在 x 方向还是 y 方向，以及 overscroll-behavior-inline 属性的结果。对于英文页面，行内方向是从左到右的，块方向是向下的。

实例

例子 1

在行内方向上关闭可滚动的 <div> 元素的滚动链：

#yellowDiv {
  overscroll-behavior-inline: contain;
}

亲自试一试

例子 2：结合 writing-mode 属性

将 <div> 元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向变为 y 方向，因此 overscroll-behavior-inline 现在在 y 方向上起作用，而不是 x 方向：

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

亲自试一试

CSS 语法

overscroll-behavior-inline: auto|contain|none|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

Referentie:CSS overscroll-behavior eigenschap

Referentie:CSS overscroll-behavior-block eigenschap

Referentie:CSS overscroll-behavior-x eigenschap

Referentie:CSS overscroll-behavior-y eigenschap

Referentie:CSS scroll-behavior eigenschap

Referentie:CSS scroll-margin eigenschap

Referentie:CSS scroll-padding eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS writing-mode eigenschap