众所周知，macOS的滚动容器默认会有一个“触底”的效果，也就是常说的“橡皮筋”效果，如下：Kapture2022-10-15at12.31.25一般情况下弹跳效果可以反映滚动是否到了边界，让滚动体验更流畅，也算是体验上的提升，但是如果页面总是有固定的定位元素，它也会受到影响。视觉上没有那么美，那么有什么办法可以阻止呢？有！一行CSS就可以解决问题。1.overscroll-behavior要防止上面的“触底反弹”，只需要一个CSS属性，那就是overscroll-behavior，它有两个作用。https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior[1]。更改滚动边界行为（例如“底部”效果和移动“拉动刷新”行为）。改变滚动链的行为（这样嵌套滚动时不会触发父容器的滚动）。关于改变滚动链的行为可以参考这篇文章，这里不再赘述：CSSoverscroll-behaviorpreventsparentscrollingfrombeingtriggeredwhenscrollingnested?张鑫旭-鑫空间-鑫生活(zhangxinxu.com）[2]。语法非常简单：overscroll-behavior:auto;/*默认*/overscroll-behavior:contain;overscroll-behavior:none;其中，contain表示保留默认的边界行为并阻止父容器滚动，none表示两者都阻止。例如在body中添加如下样式：body{overscroll-behavior:none;}下面是实际效果：Kapture2022-10-15at12.54.15可以看到，添加overscroll-behavior:none后，有不再是“触摸底部反弹”效果。2、双指导航手势在macOS中，也有系统级的导航手势，如下：默认启用后，浏览器始终可以两指快进或快退，如下：Kapture2022-10-15点13点36分。43虽然触发时浏览器会给出相关提示，但还是难免被“误触”。以下是Chrome浏览器的导航提示，不同浏览器可能略有不同。试想一下，如果你辛辛苦苦填了一大堆表格，然后不小心退了回来，你心里会不会骂妈妈？除了网站本身需要及时保存外，重要的页面最好杜绝这种行为，没错，还是这个属性。body{overscroll-behavior:none;}添加该属性后，浏览器将不再触发手势导航，自然避免了“误触”的情况。有些设计认为弹性滚动很好。去掉后就变钝了。我希望保留它。您只需要阻止手势导航。可以设置：body{overscroll-behavior:contain;}效果如下Kapture2022-10-15at13.48.14保留了弹性效果，同时也防止了手势导航，完美！3.兼容性与总结这样的用户体验技巧你学会了吗？这是一个简短的总结。弹性滚动可以反映是否滚动到边界，让滚动体验更流畅，是体验上的提升。但是弹性滚动让一些固定的元素跟着滚动，视觉上不美观，需要屏蔽掉。overscroll-behavior可以改变滚动边界的行为，完美防止弹性滚动。双指手势导航虽然提供了便利，但有时也会“误触”。overscroll-behavior可以改变滚动链的行为，完美防止手势导航。另外，在移动端阻止iOS弹性滚动是一个由来已久的问题，现在这个属性可以很好的解决这个问题。遗憾的是，Safari又被推迟了。其他浏览器早就支持了。Safari要到今年（2022年）才会开始支持它。兼容性如下：没看懂。这个弹性滚动效果不是苹果自己的错误吗？你来了，你的家人不支持吗？幸运的是，现在支持它。两年之内iOS设备可以放心使用，不需要复杂的JS做兼容性判断。
