在移動端開發的時候經常會碰到區域滾動的需求,當然實作起來也是非常簡單的,給需要滾動的元素定高然後添加一個
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前端開發工程師
蘆葦科技-廣州專業軟體外包服務公司
提供微信小程式、APP應用研發、UI設計等專業服務,專注于網際網路産品咨詢、品牌設計、技術研發等領域
點選
閱讀原文通路 http://www.talkmoney.cn 了解更多
萬能說明書 | 早起日記Lite | 凹凸桌面 | 言财
