移動端開發——關於局部區域滾動總結---實戰系列

在移動端開發的時候常常會碰到區域滾動的需求，固然實現起來也是很是簡單的，給須要滾動的元素定高而後添加一個overflow-y:scorll天然就能夠滾動了，可是添加這個屬性以後，使用chrome或者其餘瀏覽器工具調試時是支正常的，可是到手機上時滾動效果就十分的奇怪，滾動會讓人感受有卡頓感。這個時候使用一個屬性就能夠解決這個問題。-webkit-overflow-scrolling:touch，這個屬性會讓滾動條產生回彈效果，讓滾動沒有那麼生硬。

在MDN上是這麼定義這個屬性的：

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止。
touch: 使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

然而是否是設置了這個屬性以後就萬事大吉了呢？也不全是這樣子的，其實這個屬性也仍是有一些坑的。

偶爾會卡住或不能滑動

比較常見的問題有：

• 在safari上，使用了-webkit-overflow-scrolling:touch以後，頁面偶爾會卡住不動。
• 在safari上，點擊其餘區域，再在滾動區域滑動，滾動條沒法滾動的bug。
• 經過動態添加內容撐開容器，結果根本不能滑動的bug。

在網上也能看到別人也遇到過一樣的問題。

偶爾卡住的問題，解決方案網上衆說紛紜，遇到了不少相同的說法，好比若是卡住不動的話，就加一個z-index，就能解決該問題的說法。

在試了不少次以後，這種說法沒有一次解決過這個問題。這個說法可以傳播出來，多是使用者當時在使用的時候遇到了-webkit-overflow-scrolling:touch點透或者層級的問題。因此該方案不具備適用性。

下面總結一下幾種比較好的解決方案：

保證使用了該屬性的元素上沒有設置定位

若是出現偶爾卡住不動的狀況，那麼在使用該屬性的元素上不設置定位或者手動設置定位爲static，這樣會解決部分由於定位(relative、fixed、absolute)致使的頁面偶爾不能滾動的bug。

可是滑動到頂部繼續手指往下滑，或者到底部繼續往上滑，仍是會觸發卡住的問題（實際上是整個頁面上下回彈），說他算bug，其實就是ios8以上的特性，若是滾動區域大一點，用戶不會以爲這是bug，若是小了，用戶會不知道發生了什麼而卡住了。

若是添加動態內容頁面不能滾動，讓子元素height+1

若是在-webkit-overflow-scrolling:touch屬性的元素上，想經過動態添加內容來撐開容器，觸發滾動，是有bug 的，頁面是會卡住不動的。

方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。

main-inner {
    min-height: calc(100% + 1px)
}

爲何會有卡住不動的這個bug

這個bug產生於ios8以上（不十分確定，但在ios5~7上須要手動使用translateZ(0)打開硬件加速）

Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模塊使用。

-webkit-overflow-scrolling:touch的其餘坑

除此以外，這個屬性還有不少bug，包括且不限於如下幾種：

• 滾動中 scrollTop 屬性不會變化
• 手勢可穿過其餘元素觸發元素滾動
• 滾動時暫停其餘 transition

最後

若是項目中區域滾動部分不是特別多的話直接使用-webkit-overflow-scrolling:touch也不會有太大的問題，可是若是這個需求不少的話能夠考慮使用better-scroll這個庫來作移動端區域滾動。

做者簡介：李成文，蘆葦科技web前端開發工程師，擅長網站建設、微信公衆號開發、微信小程序開發、小遊戲製做、企業微信製做、H5建設，專一於前端框架、交互設計、圖像繪製、數據分析等研究。

我的博客：LCW blog

歡迎和咱們一塊兒並肩做戰： web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多

提供深圳微信公衆號製做，廣東釘釘開發，專業的企業微信外包，高性價比的微信小程序建設，靠譜的小遊戲製做，高質量的H5開發