CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌బ్లాక్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

overscroll-behavior-block అంశం స్క్రోల్ చేయడం ద్వారా స్క్రోల్ బోర్డర్ పైకి బయటకు వెళ్ళినప్పుడు సింహాన్ని పట్టుకొని ఉండే సింహాన్ని మరియు ఓవర్ స్క్రోల్ అఫ్ఫార్డెన్స్ ను మూసివేస్తుంది.

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

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

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

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

实例

例子 1

在块方向上关闭可滚动的 <div> 元素的滚动链:

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

亲自试一试

例子 2:结合 writing-mode 属性

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

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

亲自试一试

CSS 语法

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

属性值

描述
auto 允许滚动链和过度滚动反馈行为。默认值。
contain 允许过度滚动反馈行为,但不允许滚动链。
none 不允许过度滚动反馈或滚动链行为。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: auto
继承性:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.overscrollBehaviorBlock="none"

浏览器支持

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

Chrome Edge Firefox Safari Opera
63.0 18.0 59.0 16.0 50.0

相关页面

参考:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్ అట్రిబ్యూట్

参考:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌ఇన్లైన్ అట్రిబ్యూట్

参考:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌క్స్ అట్రిబ్యూట్

参考:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌యు అట్రిబ్యూట్

参考:CSS స్క్రోల్‌బీహేవియర్ అట్రిబ్యూట్

参考:CSS స్క్రోల్‌మార్జిన్ అట్రిబ్యూట్

参考:CSS స్క్రోల్-ప్యాడింగ్ అట్రిబ్యూట్

参考:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

参考:CSS వ్రాటింగ్-మోడ్ అట్రిబ్యూట్