乐趣区

关于前端:两分钟小技巧如何阻止-macOS-的触底弹性滚动和双指手势导航

jiezi

家喻户晓，macOS 的滚动容器中默认会有一个“触底反弹”成果，也就是常说的“橡皮筋”成果，如下

通常状况下，反弹成果能够反映出是否滚动到了边界，让滚动体验更加丝滑，算是一种体验的晋升，然而如果页面总有 fixed 定位元素，同样也会受到影响，在视觉上不是那么好看，那有没有方法阻止呢？

有！一行 CSS 就能够解决

一、overscroll-behavior

阻止下面的“触底反弹”只须要一个 CSS 属性，那就是overscroll-behavior，它的作用有两个

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior

  1. 扭转滚动边界行为（比方“触底”成果和挪动端“下拉刷新”行为）
  2. 扭转滚动链行为（让滚动嵌套时父容器滚动不触发）

对于扭转滚动链行为能够参考这篇文章，这里就不反复了: CSS overscroll-behavior 让滚动嵌套时父滚动不触发 « 张鑫旭 - 鑫空间 - 鑫生存 (zhangxinxu.com)

语法很简略

overscroll-behavior: auto; /* 默认 */
overscroll-behavior: contain;
overscroll-behavior: none;

其中，contain示意保留默认的边界行为，阻止父容器滚动，none示意两者都阻止。

比方给 body 加上如下款式

body{overscroll-behavior: none;}

上面是实际效果：

能够看到，加上 overscroll-behavior: none 之后，不再有“触底反弹”的成果了

二、双指导航手势

在 macOS中，还有一个零碎级别的导航手势，如下

默认开启后，浏览器总只有用双指就能够疾速后退或者后退，如下

只管在触发时，浏览器会有相干的提醒，但依然防止不了被“误触”。上面是 Chrome 浏览器的导航提醒，不同浏览器略有差别

设想一下，如果你辛辛苦苦填的一大堆表单，一下子不小心返回了，是不是心里要骂娘了。除了网站自身须要及时保留外，在重要的页面最好也要阻止这样的行为，没错，依然是这个属性

body{overscroll-behavior: none;}

加上这个属性后，浏览器就不在触发手势导航了，天然也就防止了“误触”的状况

有些设计感觉弹性滚动挺好的，去掉当前 比拟僵硬，心愿保留，只须要阻止手势导航，能够设置

body{overscroll-behavior: contain;}

成果如下

这样就既保留了弹性成果，同时也阻止了手势导航，完满！

三、兼容性和总结

这样一个用户体验小技巧你学会了吗？上面简略总结一下

  1. 弹性滚动能够反映出是否滚动到了边界，让滚动体验更加丝滑，算是一种体验的晋升
  2. 然而，弹性滚动让一些 fixed 元素也追随滚动，视觉上不美观，须要阻止
  3. overscroll-behavior能够扭转滚动边界行为，完满阻止弹性滚动
  4. 双指手势导航在提供便捷的同时，有时候也会“误触”
  5. overscroll-behavior能够扭转滚动链行为，完满阻止手势导航

另外，在挪动端阻止 iOS 弹性滚动是一个老大难的问题，现在有了这个属性能够很好的解决这个问题。惋惜的是，Safari 再次拖了后腿，其余浏览器早早就反对了，Safari 到往年（2022 年）才开始反对，兼容性如下

有点想不明确了，这弹性滚动成果不就是苹果本人搞进去的吗，自家都不反对？不过好在当初终于反对了，不出两年，iOS 设施也能够释怀用起来，再也不须要简单的 JS 做兼容判断了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版