使用 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: contain 在 html 元素上使用可防止滚动导航操做。

3. none - 和 contain 同样，但它也能够防止节点自己的滚动效果（例如 Android 炫光或 iOS 回弹）。

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

当一个 fixed 定位元素滚动到边界时，会滚动元素后面的内容。以下：

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

若是咱们有一个 fixed 定位的弹出层须要滚动时，默认是这样的，以下：

使用 overscroll-behavior: contain 能够阻止滚动传播给父元素，以下：

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果，只须要在 body 或 html 元素添加：

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 控制滚动行为：自定义下拉刷新和溢出效果

若是你想参与讨论，请点击这里