dev-reading/fe是阅读、导读、速读的repo，不要依赖dev-reading/fe学习知识。本repo只是一个快速了解文章内容的工具，不提供全文解读和翻译。您可以通过本平台快速了解文章内容，找到您感兴趣的文章，然后阅读全文。本文地址：https://github.com/dev-readin...阅读时间约3分钟CSSoverscroll-behavior的新属性允许开发者覆盖浏览器默认的滚动行为，一般用于滚动到顶部或底部。后台滚动边界和滚动链接（boundary&chaining）在APP中经常使用的抽屉导航（drawer）中，我们期望的效果是：当滚动到底部时，滚动停止，因为我们到了“滚动边界”。但是在网页中滚动并没有停止，而是继续滚动抽屉后面的内容。效果如下：我们称这种行为为滚动链接。Pull-to-refreshpull-to-refreshpull-to-refresh是移动端经常使用的操作，Chrome移动版也增加了对pull-to-refresh的支持。Custompull-to-refreshforTwitterPWA:Nativepull-to-refresh(fullpagerefresh)forChromeAndroid：很多时候我们需要禁用原生的pull-to-refresh行为。以前我们想出各种办法来处理滚动，比如：不让页面滚动，而是用触摸事件来处理滚动行为，用100vw/vh来设置页面高度防止内容溢出或者滚动，等等。..现在我们可以使用overscroll-behavior。介绍overscroll-behavioroverscroll-behavior属性有3个值：auto-默认值。元素的滚动会传播到祖先元素。contain-防止滚动链接。滚动不会传播到祖先，但会显示元素内部的原生效果。例如，Android上的眩光效果或iOS上的反弹效果，当用户触摸滚动边界时通知用户。注意：使用overscroll-behavior:containonhtml元素会阻止滚动导航操作。none-与contain相同，但它还可以防止对节点本身产生滚动效果（例如Android上的眩光或iOS上的弹跳）。防止固定定位元素的滚动传播当固定定位元素滚动出边界时，该元素后面的内容将滚动。如下：我们可以使用overscroll-behavior:contain来防止这种行为。如果我们有一个固定位置的弹出层需要滚动，默认是这样的：使用overscroll-behavior:contain来防止滚动传播到父元素，如下：disablepull-to-refreshdisablethe本机下拉刷新效果，只需添加到正文或html元素：body{/*禁用下拉刷新但允许滚动发光效果。*/overscroll-behavior-y:contain;}当我们阻止原生的下拉刷新时，可以实现自定义的下拉刷新。否则会有两次下拉刷新：Before:After:Disableglareandreboundeffects设置该属性为none，禁用默认的滚动边界效果。body{/*禁用默认的下拉刷新和边界效果，但仍然允许滑动导航*/overscroll-behavior-y:none;}Before:After:如果要禁用左右滑动手势导航，可以使用过度滚动行为-x：无。完整demoDemo地址：https://ebidel.github.io/demo...源码：https://github.com/ebidel/dem...最终效果：阅读原文：Takecontrolyourscroll:customizing下拉刷新和溢出效果讨论地址：使用CSSoverscroll-behavior控制滚动行为：自定义下拉刷新和溢出效果如果想参与讨论，请点这里
