控制页面的滚动:自定义下拉到刷新和溢出效果

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击右上方,可关注本刊

前言

通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正

目录

• 背景,滚动边界与滚动链接

• 引入overscroll行为(对应的三个属性值,auto,contain,none)

• 防止滚动逃离固定位置元素通过overscroll-behavior:contain解决

• 禁用拉到刷新(overscroll-behavior-y: contain)

• 禁用超滚色条纹和橡皮筋效果要在滚动边界时禁用反弹效果(橡皮筋效果),使用overscroll-behavior-y: none:

• 完整Demo

• 总结

CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动

背景

滚动边界和滚动链接

滚动是与页面交互的最基本的方式之一，但是由于浏览器的诡异默认行为，某些UX模式可能很难处理。作为一个例子，带一个应用程序抽屉带有大量用户可能需要滚动的项目。当它们到达底部时，溢出容器将停止滚动，因为没有更多内容可供使用。换句话说，用户到达“滚动边界”。但是请注意，如果用户继续滚动会发生什么情况。抽屉后面的内容开始滚动！滚动由父容器占领;例子中的主页面本身

被证实这种行为称为滚动链接;滚动内容时浏览器的默认行为。通常情况下，默认设置非常好，但有时候这并不理想，甚至不可预料。当用户点击滚动边界时，某些应用可能希望提供不同的用户体验

（在Chrome Android上滚动链接）

拉到刷新效果

拉到刷新是一种直观的手势，通过Facebook和Twitter等移动应用推广。拉下页面并释放，为更新近的帖子被加载。事实上，这种特殊用户体验非常流行，以至于Android这样的移动浏览器都采用了相同的效果。向下滑动页面顶部会刷新整个页面

(左边为原生拉到刷新操作,自定义拉到刷新,右边为原生拉到刷新操作刷新整个页面)

对于像Twitter PWA这样的情况，禁用本地“拉动到刷新”操作可能是有意义的。为什么？在这个应用程序中，你可能不希望用户不小心刷新页面。还有可能看到双刷新动画！另外，定制浏览器的动作可能会更好，并将其与网站的品牌更紧密地对齐。不幸的是，这种类型的定制很难实现。开发人员最终编写不必要的JavaScript，添加非被动触摸监听器（阻止滚动），或者将整个页面粘贴到100vw / vh中（以防止页面溢出）。这些变通办法在滚动性能方面具有良好记录的负面影响

引入overscroll行为

overscroll-behavior属性是一个新的CSS功能，用于控制当你过度滚动容器（包括页面本身）时发生的情况。你可以使用它来取消滚动链接，禁用/自定义拉动到刷新操作，禁用iOS上的橡皮圈效果（当Safari实现超滚动行为时）等等。最好的部分是，使用overscroll行为不会对页面性能产生负面影响

该属性有三个可能的值

1. auto - 默认,源于元素的滚动可能会传播给祖先(父级)元素

2. contain - 防止滚动链接。滚动不会传播给祖先，但会显示节点内的本地效果。例如，Android上的滚动滚动效果或iOS上的橡皮筋效果，它会在用户点击滚动边界时通知用户。注意：使用overscroll-behavior：包含html元素可防止超滚动导航操作

3. none - 与包含相同，但它也可以防止节点本身内的超滚动效果（例如，Android超量滚动发光或iOS橡皮圈） 注意:overscroll-behavior还支持overscroll-behavior-x和overscroll-behavior-y的简写，如果您只想定义特定轴的行为

让我们深入一些例子来看看如何使用overscroll-behavior

防止滚动逃离固定位置元素

chatbox聊天场景

考虑位于页面底部的固定定位聊天室。其意图是聊天室是独立的组件，它与它后面的内容分开滚动。但是，由于滚动链接，只要用户点击聊天历史记录中的最后一条消息，文档就开始滚动

对于这个应用程序，让chatbox内的滚动内容始终处于聊天状态更为合适。我们可以通过添加超滚动 `overscroll-behavior:contain行为来实现这一点：包含持有聊天消息的元素

   
   
   

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

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

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

页面重叠场景

下面”方案的另一个变动就是是当你看到内容在固定位置叠加后滚动时。一个死的样品overscroll行为是为了！浏览器试图帮助，但它最终使网站看起来越来越多。

示例 - 带和不带过度滚动行为的模态：包含

(左边之前：页面内容在叠加层下滚动,右边之后：页面内容不会在叠加层下滚动)

禁用拉到刷新

关闭pull-to-refresh操作是一行CSS。只要阻止整个视口定义元素的滚动链接。在大多数情况下，这是

   
   
   

    
  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>
    

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

    
<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>
   

禁用超滚色条纹和橡皮条纹效果

要在滚动边界时禁用反弹效果(橡皮筋效果)&