iOS 與慣性滾動

工作中常常有需要顯示大量資訊的情況，列表超出一屏就涉及到滾動的問題。例如

- var n = 1
ul  
while n <= 100
li= n++

- var n = 1
h1= "momentum scrolling on ios"  
ul  
while n <= 100
li= n++

body, ul html, body body h1 ul

直接用 flex 盒模型實現，動態適應標題的高度，很簡單不是麼。但是這時在 ios 上開啟後測試，發現有問題，下半部分區域滾動起來感覺很不順滑，用老闆的話說就像「卡齒輪」

ul

很簡單的乙個屬性，順滑滾動效果就回來了！雖然不太明白是怎麼回事，解決問題就好。但是產品經理又說了，需要在滾動時獲取滾動條的位置做些其他操作。太簡單了，加個scroll事件搞定。

document.queryselector('ul').addeventlistener('scroll', function() )

隨手寫好在瀏覽器中測試通過，然而在手機上測試就不太對勁：那個值是會變，然而滾動的時候不變，只有在滾動結束後變一次。

他包含兩個可選值：auto和touch

什麼是stacking context？這可以說是css裡乙個陰暗面，極其晦澀。有興趣的朋友可以去看高人的解釋，這裡不做討論（其實筆者自己也不是非常明白:cry:），總之所有的坑都是由此而起。

下面列出我遇到過的坑：

嚴格來說，上面的 scroll 事件不觸發只是本坑的乙個***，所以說不必考慮通過touchmove事件**scroll事件等點子，scroll事件觸發了一樣檢測不到scrolltop屬性的變化（當然檢測手指的移動距離另說）。同樣，檢測滾動區域內部元素的getboundingclientrect同樣無效。

例中起了乙個無限的raf迴圈不停地獲取scrolltop的值，然並卵。

這個更奇葩。例中用乙個半透明的div蓋在了滾動區域ul上面（實踐中可能是乙個彈框的背部蒙版），甚至給ul自己加上了pointer-events: none，手指在div上滑動仍然會觸發ul的滾動。你可以在顯示半透明蒙版時將ul的-webkit-overflow-scrolling: touch或overflow: scroll去掉，但是會造成螢幕明顯的閃爍。如果給body的touchmove事件preventdefault()可以防止觸發滾動，但是是所有滾動區域都會失效。

google 上一搜一片，但是筆者沒有遇到過，或許在新版本系統中已經修正，這裡不展開討論。

可能有些讀者已經發現，scroll事件不能觸發的坑在 ios safari 和 ios chrome 瀏覽器中不存在，為什麼呢？這裡要從 ios 上瀏覽器的發展史說起。

不知蘋果做了什麼手腳，也許蘋果的開發人員認為wkwebview的效能已經足以支撐在scroll事件中執行額外**而不造成 ui 卡頓，總之在wkwebview核心中滾動可以正常觸發scroll事件，當然也能正常獲得scrolltop的值。然而經過測試第二個問題仍然存在。

比如前段時間很火的 iscroll，筆者曾近也使用過一段時間。最後得出的結論是：iscroll 挖出的坑不比它填上的坑少，比如在 iscroll 裡加個click事件都要小心翼翼、特別對待（因為絕大多數情況繫結touch事件的**函式裡第一件做的事情就是preventdefault）。

最值得一提的是 iscroll 的速度問題，比原生實在相差太多，在中低端安卓機型上卡頓明顯，如果還要繫結scroll事件做些別的事情就更卡了。

總之筆者並不建議使用。

也許這才是真正的終極解決之道

iOS 與慣性滾動

慣性系統常用座標系慣性座標系與非慣性座標系

ios系統滾動穿透

overflow scroll 在ios 滾動卡頓

iOS 與 慣性滾動

慣性系統常用座標系 慣性座標系與非慣性座標系

ios系統滾動穿透

overflow scroll 在ios 滾動卡頓

相關推薦

iOS 與慣性滾動

慣性系統常用座標系慣性座標系與非慣性座標系