隨著項(xiàng)目開發(fā)的深入，功能的逐漸完善坑雅，做到后面就開始要追求用戶體驗(yàn)的優(yōu)化了辈挂。
之前在app的首頁上有一個搶購模塊是通過ion-scroll來實(shí)現(xiàn)水平滾動。單從功能上來說是沒有問題的裹粤，通過direction="x"來控制scroll只在水平方向滾動终蒂。
但是此時有一個問題，當(dāng)觸摸點(diǎn)在scroll的范圍內(nèi)的時候遥诉，只能水平滾動拇泣，而頁面卻不能被上下拉動。要想上下拉動頁面就必須要把觸摸點(diǎn)放到scroll外去矮锈，這并不是一個好的用戶體驗(yàn)霉翔。
在通過大量的搜索之后，網(wǎng)上給出的方法有兩種：
通過寫js來控制滑動
js監(jiān)聽touch事件苞笨，獲取到當(dāng)前touch的位置债朵，并和touch開始的位置作比較，通過這個差值來計算dom元素應(yīng)該怎么滾動瀑凝，具體的代碼這里就不貼了序芦。因?yàn)楸旧韏s功底薄弱，copy的代碼實(shí)現(xiàn)了滾動粤咪，但是出來的效果并不理想谚中，本來手指滑動的速度很慢，但是dom的滑動的速度卻很快。所以最終還是就放棄了這種實(shí)現(xiàn)方法藏杖。-
通過css的overflow來實(shí)現(xiàn)
這種方法相對第一種就要簡單得多了将塑，根本不需要寫任何的js代碼就可實(shí)現(xiàn)水平滾動。<div class="imc-scroll"> <div> <img><img><img> </div> </div> .imc-scroll { width: 100%; height: 140px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; overflow-scrolling: touch; -webkit-overflow-scrolling: touch /*iOS 滾動彈簧效果 */ }
你以為到這里就大功告成了嗎蝌麸？是的点寥，在android機(jī)上完全沒問題！（僅支持android 6.0及以上版本）
但是来吩，在iOS上你會發(fā)現(xiàn)敢辩，它完全不會滾動起來。在經(jīng)過了大量的搜索之后弟疆，才發(fā)現(xiàn)少了最關(guān)鍵的一步 :
