解決ios局部滾動不流暢以及出界(黑)和鍵盤定製

全局滾動:滾動條在body節點或更頂層
幾部滾動:滾動條在body下的某個dom節點上

IOS
全局滾動:默認支持
局部滾動:默認沒有滾動條,且滑動乾澀

1.ios局部滾動乾澀情況

如圖:左側爲默認局部滾動(乾澀卡頓),要想讓左側像右側彈性滾動效果一樣
解決方法:將以下屬性加在body上

body{
    -webkit-overflow-scrolling:touch;
}
//局部滾動的dom節點
.scroll-el{
    overflow:auto;
}

2.IOS出界
如圖:

觸發出界的情況:
全局滾動:滾動到頁面頂部(或底部)時繼續向下(向上)滑動就會出現
局部滾動:滾動到頁面頂部(或底部)時,手指離開停下,再繼續向下(向上)滑動就會出現

解決方法:
局部滾動:使用ScrollFix
demo
注意:頁面的固定區域禁止touchmove默認事件

全局滾動:暫時沒有好的解決方法,可以考慮把全局滾動改成拒不滾動

Android
版本較多,表現各異
默認沒有彈性滾動效果
-webkit-overflow-scrolling默認瀏覽器不支持
android版chrome支持

使用局部滾動會導致滾動條顯示異常,且滾動不流暢

android下建議只使用全局滾動

總結:

小幹活:
鍵盤定製
配置input節點的type屬性
1.純數字鍵盤
<input type="text" pattern="[0-9]*" />
2.搜索
<input type="search" />
3.number
<input type="number" />
4.tel
<input type="tel" />
4.tel
<input type="url" />
4.tel
<input type="email" />

autocapitalize=”off”關閉首字母大寫
autocorrect=”off”關閉輸入提示
兼容性:
ios基本支持
android不同系統版本不同定製版本支持情況不同