眾所周知，macOS 的滾動容器中默認會有一個“觸底反彈”效果，也就是常說的“橡皮筋”效果，如下：

Kapture 2022-10-15 at 12.31.25

通常情況下，反彈效果可以反映出是否滾動到了邊界，讓滾動體驗更加絲滑，算是一種體驗的提升，但是如果頁面總有fixed定位元素，同樣也會受到影響，在視覺上不是那么美觀，那有沒有辦法阻止呢？

有！一行 CSS 就可以解決。

一、overscroll-behavior

阻止上面的“觸底反彈”只需要一個 CSS 屬性，那就是overscroll-behavior，它的作用有兩個。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior[1]。

改變滾動邊界行為（比如“觸底”效果和移動端“下拉刷新”行為）。

改變滾動鏈行為（讓滾動嵌套時父容器滾動不觸發）。

關于改變滾動鏈行為可以參考這篇文章，這里就不重復了: CSS overscroll-behavior讓滾動嵌套時父滾動不觸發 ? 張鑫旭-鑫空間-鑫生活 (zhangxinxu.com)[2]。

語法很簡單：

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

其中，contain表示保留默認的邊界行為，阻止父容器滾動，none表示兩者都阻止。

比如給body加上如下樣式：

body{
  overscroll-behavior: none;
}

下面是實際效果：

Kapture 2022-10-15 at 12.54.15

可以看到，加上overscroll-behavior: none之后，不再有“觸底反彈”的效果了。

二、雙指導航手勢

在 macOS中，還有一個系統級別的導航手勢，如下：

默認開啟后，瀏覽器總只要用雙指就可以快速前進或者后退，如下：

Kapture 2022-10-15 at 13.36.43

盡管在觸發時，瀏覽器會有相關的提示，但仍然避免不了被“誤觸”。下面是 Chrome 瀏覽器的導航提示，不同瀏覽器略有差異。

想象一下，如果你辛辛苦苦填的一大堆表單，一下子不小心返回了，是不是心里要罵娘了。除了網站本身需要及時保存外，在重要的頁面最好也要阻止這樣的行為，沒錯，仍然是這個屬性。

body{
  overscroll-behavior: none;
}

加上這個屬性后，瀏覽器就不在觸發手勢導航了，自然也就避免了“誤觸”的情況。

有些設計覺得彈性滾動挺好的，去掉以后比較生硬，希望保留，只需要阻止手勢導航，可以設置：

body{
  overscroll-behavior: contain;
}

效果如下

Kapture 2022-10-15 at 13.48.14

這樣就既保留了彈性效果，同時也阻止了手勢導航，完美！

三、兼容性和總結

這樣一個用戶體驗小技巧你學會了嗎？下面簡單總結一下。

• 彈性滾動可以反映出是否滾動到了邊界，讓滾動體驗更加絲滑，算是一種體驗的提升。
• 但是，彈性滾動讓一些fixed元素也跟隨滾動，視覺上不美觀，需要阻止。
• overscroll-behavior可以改變滾動邊界行為，完美阻止彈性滾動。
• 雙指手勢導航在提供便捷的同時，有時候也會“誤觸”。
• overscroll-behavior可以改變滾動鏈行為，完美阻止手勢導航。

另外，在移動端阻止 iOS 彈性滾動是一個老大難的問題，如今有了這個屬性可以很好的解決這個問題。可惜的是，Safari 再次拖了后腿，其他瀏覽器早早就支持了，Safari 到今年（2022年）才開始支持，兼容性如下：

有點想不明白了，這彈性滾動效果不就是蘋果自己搞錯來的嗎，自家都不支持？不過好在現在支持了，不出兩年，iOS設備也可以放心用起來，再也不需要復雜的 JS 做兼容判斷了。