原生 js 實現全屏滾動效果

原理： 1. 計算當前瀏覽器屏幕高度，每次翻頁顯示的內容高度即爲屏幕高度

             2. 對鼠標滾輪事件進行監聽，注意滾輪事件的瀏覽器兼容問題。

廢話不多說，直接上代碼

html代碼：

<span style="font-size:18px;"><span style="font-size:14px;"><div id="wrap">
    <div id="main" style="top: 0;">
        <div class="content num1">
            <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
        </div>
        <div class="content num2">
            <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
        </div>
        <div class="content num3">
            <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">
        </div>
        <div class="content num4">
            <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">
        </div>
    </div>
</div></span></span>

css代碼：

<span style="font-size:14px;">#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}</span>

js代碼：

<span style="font-size:14px;"><script type="text/javascript">
	var wrap = document.getElementById("wrap");
	
	var divHeight = window.innerHeight;
	
	wrap.style.height = divHeight + "px";

	var content = $(".content");//懶得寫獲取類的原生js代碼了，直接用了jquery，=。=

	content.height(divHeight);

	var startTime = 0, //開始翻屏時間
		endTime = 0,
		now = 0;   

	if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
		//for firefox;
		document.addEventListener("DOMMouseScroll",scrollFun,false);
	
	}
	else if (document.addEventListener) {
	
		document.addEventListener("mousewheel",scrollFun,false);
	
	}
	else if (document.attachEvent) {
	
		document.attachEvent("onmousewheel",scrollFun);
	
	}
	else{
	
		document.onmousewheel = scrollFun;
	
	}

	//滾動事件處理函數
	function scrollFun(event){

			startTime = new Date().getTime();

			var delta = event.detail || (-event.wheelDelta);

			if ((endTime - startTime) < -1000) {
				//1秒內執行一次翻頁

				if (delta > 0 && parseInt(main.style.top) > -divHeight * ( content.length - 1)) { //向下翻頁

					now += divHeight ;

					turnPage(now);

				} 

				if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻頁

					now -= divHeight ;

					turnPage(now);

				}

				endTime = new Date().getTime();

			}
			else{

				event.preventDefault();

			}
			
	}

	//翻頁函數
	function turnPage(now){
		
		$("#main").animate({top:(-now+'px')},1000);

		//懶得寫動畫代碼了，直接用了jquery</span><span style="font-size:14px;">，=。=
	}
</script></span>