overscroll-behavior

overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链。

一句话就是让滚动时父元素滚动不触发

属性值

overscroll-behavior: [ contain | none | auto ]{1,2}

auto
默认效果
contain
设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。
none
临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止

兼容性

目前Safari浏览器尚不支持，Chrome和Firefox浏览器均支持，IE浏览器则有近似效果属性-ms-scroll-chaining代替，不过需要window 8及其以上版本的系统：

overscroll-behavior-x

这个CSS属性用来控制当滚动到区域的水平边界时的浏览器行为。

属性值和overscroll-behavior一样

overscroll-behavior-x: contain | none | auto

overscroll-behavior-y

这个CSS属性用来控制当滚动到区域的垂直边界时的浏览器行为。

属性值和overscroll-behavior一样

overscroll-behavior-y: contain | none | auto

overscroll-behavior相关推荐

CSS Overscroll Behavior Module Level 1
编者按:本文作者奇舞团前端开发工程师何文力,同时也是 W3C CSS 工作组成员. 6 月 6 日,W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Modu ...
04 【布局之Overscroll Behavior 定位偏移量】
1.布局-Overscroll Behavior overscroll behavior 用于控制浏览器到达滚动区域边界时的行为的功能类.这个属性可以用来防止在有多个滚动区域的页面中出现不必要的滚动. ...
大漠老师：2022 年的 CSS，到底有哪些特性
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群关于2022年的CSS新特性,自己之前也有篇原创,CSS 的未来:Cascade Layers (CSS @layer),专门是在介绍@l ...
web前端入门到实战：五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
Custom Client Side Drag and Drop Behavior in ASP.NET AJAX
这是我的一篇在http://aspalliance.com/上的英文文章,限于版权协议中的排他性条款,这里只能给出一部分摘要引用.有兴趣的朋友可以到这里看到完整的全文:<Custom Clien ...
Modeling System Behavior with Use Case（3）
这是Modeling System Behavior with Use Case的最后一个部分,主要介绍Use Case Specification.Supplementary Specificati ...
Modeling System Behavior with Use Case（2）
这是Modeling System Behavior with Use Case的第二部分,本图文首先介绍Use Case Model,然后介绍Actor以及Actor之间的关系,Use Case以及 ...
Modeling System Behavior with Use Case（1）
Modeling System Behavior with Use case 我们分为三个部分进行介绍,主要内容包括:需求简介.Use Case Model(Use Case Diagram.Use ...
android底部滑出view,Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出...
Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出在CoordinatorLayout的Behavior出现之前 ...

overscroll-behavior

overscroll-behavior

属性值

兼容性

overscroll-behavior-x

overscroll-behavior-y

overscroll-behavior相关推荐

最新文章

热门文章