為什麼 iOS 上的 Safari 沒什麼滑動慣性？

01-15

不像設置和其他界面那樣，滑一下能滾動很久。

因為材質不同，滑動摩擦力和質量不同。無聊扯淡一下，來算算 Safari 是什麼材質。

iPad 屏幕尺寸是 $242.8mm imes 189.7mm$ ，豎屏狀態下 Safari 我的手指划過整個屏幕（ $242.8mm$ ）後 Safari 總共滾動了 2.4 個屏幕長的距離（不算手指划過那段距離）。也就是 $242.8mm imes 2.4 = 580mm$ 。

我把我滑動的動作錄下來後用 iMovie 分析，發現我的手指一共在屏幕上停留了大約 $0.3s$ 。我的手指近乎勻速運動，所以 $v = Delta Y_{1} div t = 242.8 div 0.3 = 800 mm/s = 0.8 m/s$ 。這個速度也是我我手指離開 Safari 網頁時該網頁的初速度暫記為 $v_{i}$ 。

可以肯定的是 ${v}_f = 0m/s$ ，同時 $Delta {Y}_2 = 580mm = 0.58m$ 。根據公式 ${v}_f^2 = {v}_i^2 + 2a imes Delta Y$ 可推出 $a = -{v}_i^2 div 2 Delta Y = -(0.8m/s)^2 div (2 imes 0.58m) = -0.6 m/s^2$ 。

因為 ${F}_n = -F = -ma$ 同時 ${F}_n = f = mu A$ ，所以 $-ma = mu A$ 。已知 $A = 580mm imes 189.7mm = 0.1100m^2$ 。所以 $m: mu = A:a = 0.2$ 。

然後 Google 一下，標準的 A4 紙是 $70g/m^2$ ，而一般情況下 A4 紙與桌面的滑動摩擦係數是 $0.3$ ，換算單位後相比為 $0.2$ ，在考慮有效數字的情況下正正好。

所以是 A4 紙，那麼設置是什麼你來算一下？

個人覺得是頁面渲染速度跟不上的原因

為需要「慣性滾動」的容器元素添加一條 CSS 規則：

-webkit-overflow-scrolling: touch;

參考：

-webkit-overflow-scrolling

大家應該會注意到，iOS上的慣性滾動是由慢到快逐漸加速的。

其實很容易理解，Safari里瀏覽網頁，一般情況是往下翻大半頁即可，不需要滾動很遠，所以初始慣性很小。如果想往下翻很多頁，則只要重複拖動即可，滾動速度會加快的。

如樓上所說，不是沒有慣性滑動，而是每個地方阻尼係數不同。。 safari中阻尼係數就很高，感覺就沒那麼滑。至於為什麼要這麼做，也只能猜測，可能因為網頁不可預知，性能跟不上，就類似於現在滑快了都會有慢慢載入出來的情況。還有可能蘋果覺得網頁內容比較複雜，可控性更重要，滑動慢一點用戶更容易點擊鏈接等等。。。

另外，iOS上的慣性滾動肯定是由快到慢的，和物理過程相同，其完整的過程應該是你手指的滑動作用於頁面內容（或List列表等等），然後瞬間加速到最大值，然後因為前面提到的阻尼係數而慢慢減速，直到停止，和現實情況中以推動一個物體完全相同！

看了這麼多我只覺得是因為網頁瀏覽不同於設置太滑了不好控制

個人猜測：

1、受設備硬體所限，內存和頁面渲染速度跟不上，無法一次性載入整個web頁面。你可以感覺到滾動過程中會出現待載入的白色背景，稍有延遲才會呈現相應位置的內容。

2、滑動慣性小一點保證了滾動的精度，這是個相對的問題，如同@狼大人的說法，現在的設定應該是個不錯的平衡點，不至於滾動太少太慢也不至於精度不夠無法快速方便到達相應的位置。

如果是針對移動設備優化的網頁，那麼：

無論從體驗上（可讀性）、性能上，內容太多頁面太長絕對不是好設計

還有，我表示看不懂物理上的分析。。。