國慶前幾天花了點時間寫一個整屏滑動的移動頁面的demo,時間短暫還有不少東西沒寫。segmentfault
跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差很少,但思路上不太同樣,你們能夠看看他的源碼感覺一下其中的區別。code
從監聽開始,用一個變量記錄觸摸的起點位置,而後move的時候用move的觸發的clientY的值減去起點位置,讓頁面滑動那個差值的距離,這個距離可能爲負爲正,而後end的時候判斷須要往哪邊修正位置。
end的時候我作的處理是先判斷滑動的方向,(這個怎麼判斷呢?在move的時候用一個變量記錄move的位置,而後用最後一個減去start的時候記錄的位置,差值正負就是方向了)我預先計算了每個div離頁面最頂部的位置,而後倒序找第一個爲負的元素,若是同時是向上滑動且下一個元素冒出頭來的距離大於六分之一屏幕,就把下面的拉上來,若是同時是向下滑動且上一個元素冒出尾部的距離大於六分之一就把上面的拉下來。blog
其中碰到的坑是move的時間經過return false
沒法阻擋默認事件,只能e.preventDefault()
,可是電腦上模擬移動頁面能夠使用return false
事件