使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果

dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣的文章,然后去阅读全文。

本文地址:https://github.com/dev-readin...

阅读时间大概 3 分钟


CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部。

背景

滚动边界和滚动链接(boundary & chaining)

在 APP 中经常使用的抽屉导航(drawer)中,我们期望的效果是:滚动到底部时,滚动停止,因为我们到达了"滚动边界"。

但是在 Web 页面中滚动并不会停止,而是继续滚动抽屉后面的内容。效果如下:

我们称这种行为叫滚动链接(scroll chaining)。

下拉刷新 pull-to-refresh

下拉刷新是一个在移动端经常使用的操作,Chrome 移动版也增加了下拉刷新的支持。

Twitter PWA 版本的自定义下拉刷新:

Chrome Android 版的原生下拉刷新(刷新整个页面):

很多时候我们需要禁用原生的 pull-to-refresh 行为

以前我们想出各种方式来处理滚动,比如:不让页面滚动,而是使用 touch 事件处理滚动行为,使用 100vw/vh 设置页面高度禁止内容溢出或滚动,等等。。。

现在我们可以使用 overscroll-behavior

介绍 overscroll-behavior

overscroll-behavior 属性有 3 个值:

  1. auto - 默认。元素的滚动会传播给祖先元素。

  2. contain - 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 上的炫光效果或 iOS 上的回弹效果,当用户触摸滚动边界时会通知用户。注意:overscroll-behavior: containhtml 元素上使用可防止滚动导航操作

  3. none - 和 contain 一样,但它也可以防止节点本身的滚动效果(例如 Android 炫光或 iOS 回弹)。

阻止 fixed 定位元素的滚动传播

当一个 fixed 定位元素滚动到边界时,会滚动元素后面的内容。如下:

我们可以使用 overscroll-behavior: contain 阻止这种行为。

如果我们有一个 fixed 定位的弹出层需要滚动时,默认是这样的,如下:

使用 overscroll-behavior: contain 可以阻止滚动传播给父元素,如下:

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果,只需要在 bodyhtml 元素添加:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

当我们阻止了原生的下拉刷新后,就可以实现自己定义的下拉刷新。否则会出现两个下拉刷新:

之前:

之后:

禁用炫光和回弹效果

将属性制定为 none,可以禁用默认的滚动边界效果。

body {
  /* 禁用默认的下拉刷新和边界效果
     但是依然可以进行滑动导航 */
  overscroll-behavior-y: none;
}

之前:

之后:

如果想禁用左右滑动的手势导航,可以使用 overscroll-behavior-x: none

完整的 demo

Demo 地址:https://ebidel.github.io/demo...

源码:https://github.com/ebidel/dem...

最终效果:


阅读原文:Take control of your scroll: customizing pull-to-refresh and overflow effects

讨论地址:使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果

如果你想参与讨论,请点击这里


会写点 js 代码

47.7k 声望
15.9k 粉丝
0 条评论
推荐阅读
将 Google CDN 替换为国内源的 Chrome 扩展,实现网站加速⚡️
由于众所周知的原因,只需替换一个域名就可以继续使用 Google 提供的前端公共库了。同样,通过 script 标记引用这些资源,让网站访问速度瞬间提速!

justjavac19阅读 7.9k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图

会写点 js 代码

47.7k 声望
15.9k 粉丝
宣传栏