掌控滚动操作 - 自定义下拉刷新和溢出效果

Majid Valipour
X GitHub 首页

要点

借助 CSS overscroll-behavior 属性，开发者可以在到达内容顶部/底部时替换浏览器的默认溢出滚动行为。用例包括在移动设备上停用下拉刷新功能，消除滚动发光和橡皮筋效果，以及阻止网页内容在模态窗口/叠加层下滚动。

背景

滚动边界和滚动链接

Chrome Android 上的滚动链。

滚动是与页面交互的最基本方式之一，但由于浏览器的默认行为奇特，某些用户体验模式可能难以处理。以一个应用抽屉为例，其中包含大量用户可能需要滚动浏览的项。当它们到达底部时，溢出容器会停止滚动，因为已没有其他内容可供浏览。也就是说，用户达到了“滚动边界”。但请注意，如果用户继续滚动，会发生什么情况。抽屉式导航栏后面的内容开始滚动！滚动由父级容器接管；在本示例中，主页面本身。

事实证明，这种行为称为“滚动链”，即浏览器在滚动内容时的默认行为。通常默认值非常好，但有时并不符合预期，甚至不符合预期。某些应用可能需要在用户进入滚动边界时提供不同的用户体验。

下拉刷新效果

下拉刷新是 Facebook 和 Twitter 等移动应用常用的一种直观手势。下拉社交信息流并松开手指，会创建新空间来加载最新帖子。事实上，这种用户体验已经变得如此流行，以至于 Android 版 Chrome 等移动浏览器采用了同样的效果。从页面顶部向下滑动可刷新整个页面：

Twitter 的自定义下拉刷新功能
（在 PWA 中刷新 Feed 时）。
Chrome Android 的原生下拉刷新操作
会刷新整个页面。

对于 Twitter PWA 等情况，停用原生下拉刷新操作可能是合理的。为什么会这样？在此应用中，您可能不希望用户意外刷新页面。还可能会出现双重刷新动画！或者，最好自定义浏览器的操作，使其与网站的品牌更贴近。遗憾的是，这种类型的自定义操作难以实现。开发者最终编写了不必要的 JavaScript，添加非被动触摸监听器（会屏蔽滚动），或使整个网页保持 100vw/vh <div> 模式（以防止网页溢出）。这些变通方法会对滚动性能产生有据可查的负面影响。

我们可以做得更好！

隆重推出 overscroll-behavior

overscroll-behavior 属性是一项新的 CSS 功能，可控制滚动容器（包括网页本身）时的行为。您可以使用它取消滚动链、停用/自定义下拉刷新操作、在 iOS 上停用橡皮筋效果（当 Safari 实现 overscroll-behavior 时）等。最棒的是，使用 overscroll-behavior 不会对网页性能产生不利影响（就像简介中提到的技巧）！

该属性采用三个可能的值：

  1. auto - 默认值。源于元素的滚动可能会传播到祖先元素。
  2. contain - 防止滚动链接。滚动不会传播到祖先实体，但会显示节点内的本地效应。例如，Android 上的滚动发光效果或 iOS 上的橡胶带效应会在用户到达滚动边界时通知用户。注意：对 html 元素使用 overscroll-behavior: contain 可防止滚动导航操作。
  3. none - 与 contain 相同，但也可以防止节点本身内部的滚动效果（例如 Android 滚动发光或 iOS 橡皮筋）。

我们来深入了解一些示例，了解如何使用 overscroll-behavior。

防止滚动转义固定位置元素

聊天框场景

聊天窗口下方的内容也会滚动 :(

假设有一个固定的聊天框位于页面底部。这样做的目的是使聊天框成为一个独立的组件，使其与其后面的内容分开滚动。但是，由于滚动链接的影响，当用户遇到聊天记录中的最后一条消息时，文档就会立即开始滚动。

对于此应用，比较合适的做法是将聊天框中发起的滚动保留在聊天内容内。为此，我们可以将 overscroll-behavior: contain 添加到包含聊天消息的元素中：

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

从本质上讲，我们在聊天框的滚动上下文和主页面之间建立了逻辑分离。最终结果是，当用户到达聊天记录的顶部/底部时，主页会保持不动。在聊天框中开始的滚动不会传播。

网页重叠式广告情形

“滚动下方”场景的另一个变体是，内容在固定位置叠加层后滚动。抽空领取奖励 overscroll-behavior 准备好了！浏览器试图提供一些实用信息 但最终导致网站看起来有问题

示例 - 带有和不带 overscroll-behavior: contain 的模态窗口：

之前：网页内容在叠加层下方滚动。
之后：网页内容不会在叠加层下方滚动。

停用下拉刷新

关闭下拉刷新操作只需一行 CSS。只需防止整个视口定义元素上发生滚动链接即可。在大多数情况下，它是 <html> 或 <body>：

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

通过这项简单的添加操作，我们修复了聊天框演示中的双重下拉刷新动画，并可以改为实现使用更简洁的加载动画的自定义效果。当收件箱刷新时，整个收件箱也会进行模糊处理：

之前
之后

以下是完整代码的代码段：

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

停用滚动发光和橡皮筋效果

如需在到达滚动边界时停用弹跳效果，请使用 overscroll-behavior-y: none：

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}
之前：点击滚动边界后会显示发光。
之后：停用光晕。

完整演示

综上所述，完整的聊天框演示使用 overscroll-behavior 创建自定义下拉刷新动画，并禁止滚动转义聊天框 widget。这样可以提供最佳用户体验，如果没有 CSS overscroll-behavior，将很难实现。

观看演示 | 来源