H5全屏滑動

移動web時代，學會做一些簡單h5頁面會很受用。比如最常見的活動營銷簡歷h5頁面是乙個全屏滾動頁面(fullpage)。以下就是乙個簡單的例子。demo：demo位址

body

.section
h1.main-wrap
.main 

首先清下body和h1的內建樣式。main-wrap是最外面的乙個dom節點相當於視窗的作用,是固定不動的，寬高和裝置一致。

main就是包含螢幕塊的標籤,操作top值,實現動畫。寫過banner動畫的同學肯定不陌生。類似的原理。然後每個section就是乙個屏的內容。

移動端和pc端在事件中有很多不同,比如沒有hover事件了，click比tap慢幾百毫秒了，等等，反正坑很多，同志一起好好學吧～。移動端一共有4種觸控事件:

touchstart,在使用者的手指觸控螢幕的瞬間觸發。

touchmove,在使用者移動手機的過程中連續觸發。

touchend,使用者的手指離開螢幕的瞬間觸發。ios離開webview邊界不會觸發。

touchcancel,很特殊，瀏覽器差異,(不需理會)。

任何手勢就是計算這幾個事件內的值加減乘除來判斷各種手勢。

最直接的就是引入乙個開源的手勢庫。hammer就是我比較推薦的乙個手勢庫。

我用的是最新版2.0.4

hammer介紹頁

//獲取一屏的高度，判斷該移動多少

var slength = document.queryselectorall('.section').length;

//判斷有幾屏頁面

var sindex = 0;//標記當前第幾頁

var sscroll = false;//滾動時就不再觸發事件，防止誤點

var main = document.queryselector('.main'); //需要移動的dom

window.onmousewheel = function(e)

sindex--;

scrollto(sindex);

}else

sindex++;

scrollto(sindex);}}

}function scrollto(i), 700);

}var hamm = new hammer(document.queryselector('.main-wrap'));

hamm.get('swipe').set();

//hammer預設關閉上下swipe 設定開啟上下滑屏

hamm.on('swipedown', function()

sindex--;

scrollto(sindex);

}});hamm.on('swipeup', function()

sindex++;

scrollto(sindex);

}

});最後放張完整的js部分的圖:

H5禁止頁面滑動 滾動

禁止頁面滾動 有三種方法 1，依靠css 將頁面 document.documentelement.style.overflow hidden document.body.style.overflow hidden 手機版設定這個。如果設定了如上，頁面的滾動條將會消失，此時滑鼠滾輪失效。但是 你用鍵...

h5放大縮小，滑動檔案

用hammer.js放大縮小 加上以下 可以滑動。不然設定掛載縮放事件後滑動不了 let hand new hammer node,蘋果要插入以下 避免第二部加入touchaction後造成的問題 document.addeventlistener gesturestart function eve...

h5滾動時側滑出現 H5觸控事件判斷滑動方向

為了給觸控介面提供有力支援,觸控事件提供了響應使用者對觸控螢幕或者觸控板上操作的能力.介面touchevent touchevent 是一類描述手指在觸控平面 觸控螢幕 觸控板等 的狀態變化的事件。這類事件用於描述乙個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等。每 個 touch...