Hi all,
有段時間沒發文了,分享一下今天寫的小作品!
DEMO: http://comdan66.github.io/OA-mobileScrollView/
這是一個模擬手機水平 scroll view 的滑動效果,
是利用 jquery、jquery-ui、jquery.ui.touch-punch 實作!
主要依賴 jquery.js 與 jquery-ui.js 實作 scroll view,
再利用 jquery-ui 的 draggable 設定 axis: 'x' 完成水平拖曳移動,
但在手機的滑動 draggable 會失效,所以需要 jquery.ui.touch-punch.js 修正,
然後我再利用這些巨人大大的 lib 作出 這個 extend function!
特別注意,Demo 網站所有元素都用 box-sizing: border-box;
所以要改的話,要稍微注意,
版型 css 部分,是使用 scss 撰寫,故此專案會有 scss、css 的資料夾。
有興趣的話可以參考一下喲,也歡迎分享!