【译】谈橡皮筋特效的解决方案

最新推荐文章于 2025-03-13 11:10:06 发布

潇湘待雨

最新推荐文章于 2025-03-13 11:10:06 发布

阅读量611

点赞数

分类专栏：且听潇湘话前端文章标签： css js 滑动

本文链接：https://blog.csdn.net/qq_42466103/article/details/82080305

版权

本文探讨了网页滚动橡皮筋特效（又称弹簧滚动）及其在不同浏览器上的表现，重点关注如何通过CSS和JavaScript解决这个问题。文章讨论了使用绝对定位、CSS属性`overscroll-behavior`以及JavaScript事件监听等方式来防止fixed元素随滚动移动，特别是在移动端Safari上的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文翻自Scroll Bouncing On Your Websites，拜读之后收获颇多，结合自己的理解，将该文章翻成中文，一方面加深理解另一方面好文共享。

导读

本文介绍了不同浏览器上弹簧滚动(即scroll bouncing)特效及实现，并回顾了网上几种常见的解决方案,顺便介绍了下近来实现的css属性 overscroll-behavior。希望读过之后能对构建和设计带有fixed元素的页面有所帮助

Scroll bouncing

弹簧特效（同样被叫做滑动橡皮筋特效或弹性滚动），经常发生于下面的场景：
1. 当滚动到页面或者html元素的最上或者最下部的时候，在页面或者元素回到顶部/底部之前(即你松开手指或者鼠标之前)，会短暂的看到空白区域的出现。
2. 同样的效果也可以在元素之间的CSS滚动捕捉(CSS scroll-snapping)中看到。
本文主要关注于第一种情况，换句话说就是滚动端口到达其滚动边界时的场景
对于Scroll bouncing的深入理解，可以帮助我们决定如何构建网页和页面如何滚动。

背景

当你不想看到fixed的元素跟着页面移动时，弹簧特效就不那么令人愉快了。例如：我们希望页面上有位置固定的header和footer、或者需要一个fixed的菜单、滚动过程中捕获页面的具体位置、不希望顶部或者底部有额外的滚动。这时候就需要我们去看一下有什么方案去解决这类页面顶/底部的弹簧特效了。

场景回顾

假如入我们有下面这个页面，底部有一个固定且不能移动的footer，同时页面其他内容可以滚动。看起来如下：
https://user-gold-cdn.xitu.io/2018/8/20/16557cd210e6d683?w=800&h=443&f=gif&s=175632‘/>
如果是在非触摸屏和触摸板的Firefox和其他浏览器上，表现是符合预期，但是当我们使用mac上的chrome时，当用触摸板scroll到最下部时，事情就有点不一样了。
https://user-gold-cdn.xitu.io/2018/8/20/16557cd22c2b7ef4?w=1280&h=710&f=gif&s=2726862‘/>

虽然设置了footer为fixed=>bottom的css，但是这个橡皮筋特效确实有点猝不及防。
让我们看看position:fixed到底几个意思：
According to the CSS 2.1 Specification, when a “box” (in this case, the dark blue footer) is fixed, it is “fixed with respect to the viewport and does not move when scrolled.”
根据CSS 2.1 规范：当一个box(这里显然是footer)被设置为fixed，它将根据viewport定位并且在滚动过程中不移动。

显然上面的效果是预期之外的。
为了使文章更加完整，把在移动端Edge、移动端Safari和桌面Safari的效果都进行了尝试，确实在firefox和chrome上的表现是不同的。在不同平台上开发相同效果的滑动确实是一件挑战性的事情。

解决方案

对于我们来说最先出来的想法肯定是简单快捷的方式，那么针对这种情况，首选当然是css来单独处理。因此选择下面的方式来尝试。测试浏览器包括win10和mac上的chrome、firefox、safari以及Edge和移动端safari，浏览器的版本都是2018最新版本。页面结构如下：

<html>
  <body>
    <div class="body-container">
      <div class="color-picker-main-container"> 
      </div>
    </div>
    <footer>
    </footer>
</body>