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

空的頁面

---

新建一個空的html5頁面,在head標簽里面加入兩個meta標簽

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

第一個標簽是引導瀏覽器使用最新內核。
第二個標簽是控制設備的視口寬度為屏幕寬度，然后靜止縮放，模擬原生app的感覺。

這個是apple公司定的規則，并沒有寫入w3c規范，但是成為了業內標準。瀏覽器廠商都約定俗成了。

就是這樣的一個空的頁面了。

css html

---

<div class="main-wrap"><div class="main"><div class="section a"><h1>這是屌屌的第一屏頁面222</h1></div><div class="section b"><h1>這是霸氣的第二屏頁面</h1></div><div class="section c"><h1>這是呵呵的第三個屏頁面</h1></div></div> </div> body{padding: 0;margin: 0;overflow: hidden } .section{width: 100vw;height: 100vh; } h1{margin: 0px; } .main-wrap{width: 100vw;height: 100vh;overflow: hidden;position: relative; } .main {position: absolute;top: 0px;left: 0px;transition: 500ms cubic-bezier(0.86, 0, 0.07, 1); }

先解釋兩個css3屬性，width: 100vw是指寬度和設備寬一致同理100vh,transition是css3的一個屬性過度。cubic-bezier(0.86, 0, 0.07, 1);是一個自定義 貝澤爾曲線。這是一個磁性滾動的過度,嗯,參數我是抄錘子科技的。

首先清下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介紹頁

JS部分

---

var sHeight = document.querySelector('.a').clientHeight; //獲取一屏的高度，判斷該移動多少 var sLength = document.querySelectorAll('.section').length; //判斷有幾屏頁面 var sIndex = 0;//標記當前第幾頁 var sScroll = false;//滾動時就不再觸發事件，防止誤點 var main = document.querySelector('.main'); //需要移動的DOM window.onmousewheel = function(e){//PC端的滾輪事件，嗯不兼容火狐if(!sScroll){if(e.wheelDelta>0){//上一頁if(sIndex == 0){return; }sIndex--;scrollTo(sIndex);}else{//下一頁if(sIndex == sLength-1){return;}sIndex++;scrollTo(sIndex);}} }function scrollTo(i){//操作動畫的函數sScroll = true;main.style.top = -i*sHeight + 'px';setTimeout(function(){sScroll = false}, 700); }var hamm = new Hammer(document.querySelector('.main-wrap')); hamm.get('swipe').set({ direction: Hammer.DIRECTION_ALL}); //hammer默認關閉上下swipe 設置開啟上下滑屏 hamm.on('swipedown', function(){if(!sScroll){//上一頁if(sIndex == 0){return; }sIndex--;scrollTo(sIndex);}}); hamm.on('swipeup', function(){if(!sScroll){//下一頁if(sIndex == sLength-1){return;}sIndex++;scrollTo(sIndex);} });

最后放張完整的js部分的圖:

總結

以上是生活随笔為你收集整理的H5全屏滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。