众所周知，macOS的滚动容器默认会有一个“触底”的效果，也就是常说的“橡皮筋”效果，如下通常情况下，弹跳效果可以反映滚动是否到了边界，让滚动体验更流畅，也算是体验的提升，但是如果页面一直有固定的定位元素，也会受到影响，并且它在视觉上不是那么漂亮。有什么办法阻止它吗？有！一行css就能解决问题1.overscroll-behavior防止上述“触底反弹”，只需要一个css属性，即overscroll-behavior，它有两个作用https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior改变滚动边界行为（比如“底部”效果和移动端“下拉刷新”行为）改变滚动链行为（使得嵌套滚动时不触发父容器滚动）关于改变滚动链行为可以参考这篇文章，这里不再赘述：CSSoverscroll-behaviorpreventsparentscrollingfrombeingtriggeredwhenscrollingnested*/overscroll-behavior:contain;overscroll-behavior:none;其中，contain表示保留默认的边界行为并阻止父容器滚动，none表示两者都阻止。比如在bodybody中添加如下样式{overscroll-behavior:none;}下面是实际效果：可以看到添加overscroll-behavior:none之后，就没有了“触底反弹”的效果2.双指导航手势在macOS中，还有一个系统级的导航手势。默认启用以下后，浏览器始终可以用两根手指快速向前或向后移动。虽然触发时浏览器会有相关提示，但还是避免了“误触”。以下是Chrome浏览器的导航提示。不同的浏览器略有不同。试想一下，如果你辛辛苦苦填了很多表，不小心一下子全部退了回来，你会不会骂妈妈？除了需要及时保存网站本身外，最好在重要页面上防止此类行为。没错，还是属性body{overscroll-behavior:none;}加上这个属性后，浏览器就不会再触发手势导航了，自然也就避免了“误触”的情况。有些设计感觉弹性滚动很好。去掉之后会比较生硬。我希望保留它。您只需要阻止手势导航。可以设置body{overscroll-behavior:contain;}效果如下既保留了弹性效果，又防止了手势导航，完美！3.兼容性与总结这样的用户体验技巧你学会了吗？简单总结一下，弹性滚动可以反映滚动是否到了边界，让滚动体验更流畅，也算是体验的提升。但是弹性滚动让一些固定的元素跟着滚动，视觉上不美观。有必要防止过度滚动行为。改变滚动边界的行为，完美防止弹性滚动双指手势导航在提供便利的同时，有时“误触”overscroll-behavior可以改变滚动链的行为，完美防止手势导航。另外，防止移动端iOS弹性滚动一个长期存在的问题，现在有了这个属性可以很好的解决这个问题。遗憾的是，Safari又被推迟了。其他浏览器早就支持了。Safari要到今年（2022年）才会开始支持它。兼容性如下。我不明白。这个弹性滚动效果不是苹果自己创造的吗？嗯，连自己都不支持？好在现在终于支持了。两年之内，iOS设备也可以放心使用，不需要复杂的JS做兼容性判断。最后，如果觉得对你有帮助，请点赞、收藏、转发???
