移動端重構系列7——滾動

移動端重構系列-mobile

本系列文章，若是沒有特別說明，兼容安卓4.0.4+

原生滾動

原生滾動的屬性爲：-webkit-overflow-scrolling:touch;，若是是走高富帥的蘋果路線，是沒問題的，誰讓這是人家親生的呢；若是是安卓的話，我真不知道是支持仍是不支持，說不支持吧好像有點緩動效果，說支持吧好像把這條屬性砍掉也同樣，感興趣的能夠本身測試下（添加或刪除這個屬性對比下）

原生滾動支持測試：

•  overflow-scrolling 測試1
•  overflow-scrolling 測試2

iscroll模擬

既然原生的安卓上不太靠譜，那就有必要用js來解決了，由於本人不擅長js，因此直接上iscroll，如今iscroll也已經到第五版本了，iscroll的github上有很全的例子，雖然比較簡單，不過入門仍是不錯的。這裏我也搞了兩個demo，在demo以前，有必要先說明下使用iscroll應該注意的一些事項：

html結構方面

iscroll要求至少兩層結構，wrap是一個固定的容器，overflow爲hidden，而scroll爲滾動的內容，若是開啓translate（默認開啓），則使用translate來實現偏移滾動，若是沒有則使用left/top來實現偏移滾動。若是wrap下面有多個直接子元素，即scroll有其餘兄弟元素則只對第一個子元素滾動，其餘的自動忽略。（wrap和scroll的class是隨便的，主要就是得有兩層結構）

<div class="wrap"> <div class="scroll"> ... </div> </div> 

如圖：

css樣式方面

除了要求wrap有寬高及overflow爲hidden，還得對scroll元素設置position爲relative或absolute，這樣才能設置偏移。

js方面

最簡單的就是直接new一個IScroll對象便可，其餘配置可直接參考官網的說明：

window.addEventListener('load',function(){ var myScroll = new IScroll('.wrap');}); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

獻上兩個簡單的demo：

•  絕對定位佈局中間使用iscroll滾動
•  水平滾動，按照官方的實例，水平滾動的時候，整個頁面的垂直滾動直接交給瀏覽器默認處理。

因爲本人的js水平實在有限，關於這個我也分析不出來什麼前因後果，摘錄幾篇文章以供想學習的參考下吧。下面的資料都是iscroll 4的。（雖然官網已經介紹的足夠好了，但iscroll的坑仍是不少的，多看看總不賴）

參考資料：

•  iScroll 4.2.5 中文API
•  web app開發利器 - iscroll4 解決方案
•  iscroll4 精講

如需轉載，煩請註明出處：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-scroll.html