共计 1458 个字符，预计需要花费 4 分钟才能阅读完成。
家喻户晓，macOS 的滚动容器中默认会有一个“触底反弹”成果，也就是常说的“橡皮筋”成果，如下
通常状况下，反弹成果能够反映出是否滚动到了边界，让滚动体验更加丝滑，算是一种体验的晋升，然而如果页面总有 fixed 定位元素，同样也会受到影响，在视觉上不是那么好看，那有没有方法阻止呢？
有！一行 CSS 就能够解决
一、overscroll-behavior
阻止下面的“触底反弹”只须要一个 CSS 属性，那就是overscroll-behavior，它的作用有两个
https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior
- 扭转滚动边界行为（比方“触底”成果和挪动端“下拉刷新”行为）
- 扭转滚动链行为（让滚动嵌套时父容器滚动不触发）
对于扭转滚动链行为能够参考这篇文章，这里就不反复了: 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;}成果如下
这样就既保留了弹性成果，同时也阻止了手势导航，完满！
三、兼容性和总结
这样一个用户体验小技巧你学会了吗？上面简略总结一下
- 弹性滚动能够反映出是否滚动到了边界，让滚动体验更加丝滑，算是一种体验的晋升
- 然而，弹性滚动让一些
fixed元素也追随滚动，视觉上不美观，须要阻止 overscroll-behavior能够扭转滚动边界行为，完满阻止弹性滚动- 双指手势导航在提供便捷的同时，有时候也会“误触”
overscroll-behavior能够扭转滚动链行为，完满阻止手势导航
另外，在挪动端阻止 iOS 弹性滚动是一个老大难的问题，现在有了这个属性能够很好的解决这个问题。惋惜的是，Safari 再次拖了后腿，其余浏览器早早就反对了，Safari 到往年（2022 年）才开始反对，兼容性如下
有点想不明确了，这弹性滚动成果不就是苹果本人搞进去的吗，自家都不反对？不过好在当初终于反对了，不出两年，iOS 设施也能够释怀用起来，再也不须要简单的 JS 做兼容判断了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
