眾所周知，macOS 的滾動(dòng)容器中默認(rèn)會(huì)有一個(gè)“觸底反彈”效果，也就是常說(shuō)的“橡皮筋”效果，如下：

Kapture 2022-10-15 at 12.31.25

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

有！一行 CSS 就可以解決。

一、overscroll-behavior

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

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

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

改變滾動(dòng)鏈行為（讓滾動(dòng)嵌套時(shí)父容器滾動(dòng)不觸發(fā)）。

關(guān)于改變滾動(dòng)鏈行為可以參考這篇文章，這里就不重復(fù)了: CSS overscroll-behavior讓滾動(dòng)嵌套時(shí)父滾動(dòng)不觸發(fā) ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com)[2]。

語(yǔ)法很簡(jiǎn)單：

overscroll-behavior: auto; /* 默認(rèn) */
overscroll-behavior: contain;
overscroll-behavior: none;

其中，contain表示保留默認(rèn)的邊界行為，阻止父容器滾動(dòng)，none表示兩者都阻止。

比如給body加上如下樣式：

body{
  overscroll-behavior: none;
}

下面是實(shí)際效果：

Kapture 2022-10-15 at 12.54.15

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

二、雙指導(dǎo)航手勢(shì)

在 macOS中，還有一個(gè)系統(tǒng)級(jí)別的導(dǎo)航手勢(shì)，如下：

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

Kapture 2022-10-15 at 13.36.43

盡管在觸發(fā)時(shí)，瀏覽器會(huì)有相關(guān)的提示，但仍然避免不了被“誤觸”。下面是 Chrome 瀏覽器的導(dǎo)航提示，不同瀏覽器略有差異。

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

body{
  overscroll-behavior: none;
}

加上這個(gè)屬性后，瀏覽器就不在觸發(fā)手勢(shì)導(dǎo)航了，自然也就避免了“誤觸”的情況。

有些設(shè)計(jì)覺得彈性滾動(dòng)挺好的，去掉以后比較生硬，希望保留，只需要阻止手勢(shì)導(dǎo)航，可以設(shè)置：

body{
  overscroll-behavior: contain;
}

效果如下

Kapture 2022-10-15 at 13.48.14

這樣就既保留了彈性效果，同時(shí)也阻止了手勢(shì)導(dǎo)航，完美！

三、兼容性和總結(jié)

這樣一個(gè)用戶體驗(yàn)小技巧你學(xué)會(huì)了嗎？下面簡(jiǎn)單總結(jié)一下。

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

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

有點(diǎn)想不明白了，這彈性滾動(dòng)效果不就是蘋果自己搞錯(cuò)來(lái)的嗎，自家都不支持？不過好在現(xiàn)在支持了，不出兩年，iOS設(shè)備也可以放心用起來(lái)，再也不需要復(fù)雜的 JS 做兼容判斷了。