下面有更多 "亲自试一试" 示例。
这个overscroll-behavior-inline
当您尝试沿内联方向滚动越过滚动边界时,属性用于关闭元素上的滚动链接或过度滚动功能。
笔记:要横向滚动以触发内联方向的过度滚动行为,您可能需要在触摸板或触摸屏上使用滑动手势。
滚动链接是指在元素上过度滚动会导致父元素上的滚动行为。这是默认行为。
过度滚动可供性是当尝试滚动超出滚动边界时给用户的反馈。例如,当移动设备滚动到页面顶部之外时,视觉反馈和页面刷新通常会发生。
CSSoverscroll-behavior-inline
和overscroll-behavior-block
属性与 CSS 属性非常相似overscroll-behavior-x
和overscroll-behavior-y
,但是overscroll-behavior-inline
和overscroll-behavior-block
属性取决于内联和块方向。
笔记:相关CSS属性writing-mode
定义内联方向。这会影响内联方向是 x 方向还是 y 方向以及结果overscroll-behavior-inline
属性。对于英文页面,内联方向是从左到右,块方向是向下。
表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
overscroll-behavior-inline | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
overscroll-behavior-inline: auto|contain|none|initial|inherit;
Value | Description |
---|---|
auto | Allows scroll chaining and overscroll affordance behavior. This is default |
contain | Allows overscroll affordance behavior, but not scroll chaining. |
none | Does not allow overscroll affordance or scroll chaining behavior. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
随着writing-mode
<div> 元素的属性值设置为 'vertical-rl',内联方向是 y 方向,因此 overscroll-behavior-inline 现在在 y 方向而不是 x 方向工作:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-inline: contain;
}
亲自试一试 »
CSS 过度滚动行为属性:CSS Overscroll-behavior 属性
CSS overscroll-behavior-block 属性:CSS Overscroll-behavior-block 属性
CSS overscroll-behavior-x 属性:CSS Overscroll-behavior-x 属性
CSS overscroll-behavior-y 属性:CSS Overscroll-behavior-y 属性
CSS 滚动行为属性:CSS 滚动行为属性
CSS 滚动边距属性:CSS 滚动边距属性
CSS 滚动填充属性:CSS 滚动填充属性
CSS 滚动对齐属性:CSS 滚动对齐属性
CSS 写入模式属性:CSS 书写模式属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!