實現滑鼠滾動一下頁面就上下翻一頁的效果

阿新 • • 發佈：2019-01-13

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css">
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.page{
			height: 100%;
			width: 100%;
			font-size: 126px;
			display: -webkit-box; /*Safari*/
			display: -moz-box; /*Firefox*/
			display: -ms-flexbox; /*IE*/
			display: -webkit-flex; /*Chrome*/
			display: flex;
			-webkit-box-align: center;
			-moz-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-moz-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		}
		#mao{
			position: fixed;
			right: 0;
			bottom: 0;
		}
	</style>

	<body>



		<div class="page" id="item-1">Prat 1</div>
		<div class="page" id="item-2">Prat 2</div>
		<div class="page" id="item-3">Prat 3</div>
		<div class="page" id="item-4">Prat 4</div>
		<div class="page" id="item-5">Prat 5</div>
		<div class="page" id="item-6">Prat 6</div>
		<div class="page" id="item-7">Prat 7</div>

		<script type="text/javascript">
			//			var oldy = 0,tem = 0,fullheight = document.body.clientHeight;
			//			window.onscroll = function() {
			//				var y = document.documentElement.scrollTop || document.body.scrollTop;
			//				console.log('this is y' + y);
			//				if (y > oldy) {
			//					location.href = '#item-4';
			//					console.log('向下翻');
			//					oldy = y;
			//				} else if (y < oldy) {
			//					//		document.body.scrollTop-=fullheight;console.log('向上翻');oldy=y;
			//				} else {
			//					console.log('翻你妹啊');
			//					console.log('xiangdeng');
			//				}
			//
			//				console.log('this is oldy' + oldy);
			//			}
					var scrollFunc = function(e) {
							ee = e || window.event;
							var t1 = document.getElementById("wheelDelta");
							var t2 = document.getElementById("detail");
							var y = document.documentElement.scrollTop || document.body.scrollTop;
							var fullheight = document.body.offsetHeight;
							if (e.wheelDelta) { //IE/Opera/Chrome 
								var a = e.wheelDelta;//向上為120，向下為-120
								if(a>0){//向上	
								document.body.scrollTop -= fullheight/2;
								} 
								if(a<0){//向下
									document.body.scrollTop += fullheight/2;
								}
							} else if (e.detail) { //Firefox 
								var a = e.detail;//向上為-3，向下為3
								if(a<0){//向上	
								document.documentElement.scrollTop -= fullheight/2;
								} 
								if(a>0){//向下
									document.documentElement.scrollTop += fullheight/2;
								}
							}
							
							
							
							
						}
						
						/*註冊事件*/
					if (document.addEventListener) {
						document.addEventListener('DOMMouseScroll', scrollFunc, false);
					} //W3C 
					window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
		</script>
	</body>

</html>

原始碼如上。

一開始希望window.onscroll = function() {}的方法來實時檢測滾動欄是否有變化。也實現了翻頁的功能，但是直接就是一翻到底。。。也就是因為在實現翻頁的時候由於document.body.scrollTop的變化，會自動觸發新的window.onscroll函式。所以無奈只能求助百度，最後居然讓我發現一個絕妙的方法和部落格。不過沒有做過向下的相容性測試，最新版chrome和firefox是支援的。
希望自己可以慢慢學習，每天練習。
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);

} //W3C
window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
事件監聽的相容寫法
最後一個需要注意的地方是獲取當前頁面頂端到body頂端的距離（比如你在第三頁距離文件頭部的距離為兩個螢幕的高度），要這樣寫
var y=document.documentElement.scrollTop || document.body.scrollTop;谷歌中
document.documentElement.scrollTop怎麼搞都是0，需要用bodywindow.event.wheelDelta非firefox瀏覽器獲取到滾動條變化的情況，以谷歌為例。

而且上述程式碼的關鍵在於其中firex和其他瀏覽器的效果不同

document.body.scrollTop的變化，會自動觸發新的window.onscroll函式。所以無奈只能求助百度，最後居然讓我發現一個絕妙的方法和部落格。不過沒有做過向下的相容性測試，最新版chrome和firefox是支援的。

如果向上滾動滑鼠滾輪，則window.event.wheelDelta為120，向下則為-120.

火狐則是window.event.detail代表滑鼠滾輪運動情況，且向上滾動window.event.detail的值為-3，向下為3.這是區別的地方

文件也是亂亂的，最終效果也有點不理想。滾動起來不平滑，但是不用jquery的情況下寫動畫還是不會寫。留待以後回過頭複習的時候完善。
演示地址https://github.com/Fucntion/jseveryday/blob/master/207/207.html

實現滑鼠滾動一下頁面就上下翻一頁的效果

實現滑鼠滾動一下頁面就上下翻一頁的效果

jq實現滑鼠滾動的時候上下翻頁，動畫在翻頁的時候才會執行

滑鼠滾動到頁面底部自動載入資料--阻止多次請求

JS實現滑鼠移入移出控制圖片的切換效果

如何實現滑鼠移動按鈕上，按鈕變顏色的效果

jq實現滑鼠放置名字上顯示詳細內容的氣泡效果

JQuery實現滑鼠滑動多次，只觸發一次響應事件

小程式 - 設定上一層頁面資料 & 監聽頁面滑動返回上一頁

銅板街1--TextSwitcher實現文字上下翻牌效果

JS實現判斷滾動條滾到頁面底部並執行事件的方法

jQuery fullpage.js 全屏滾動外掛取消滑鼠滾動事件，點選選單欄定位顯示頁面。

Vue實現進入頁面就獲取輸入框焦點

如何實現頁面一載入就將上一次選擇操作的下拉框值回顯出來

Ajax如何實現從前端不重新整理頁面就可以到後端取到資料

JavaScript 在vue頁面下實現滑鼠拖拽div改變其大小，適用於鷹眼地圖，街景地圖等。

Vue實現浮動按鈕元件 - 頁面滾動時自動隱藏 - 可拖拽

jQuery實現滑鼠放在table哪一行哪一行就變色，移開就恢復

js實現頁面左右上下拖拽

TextView 內容過多,顯示不全時,實現帶滾動條,上下滑動

在UITableView中識別左右滑動，實現上下翻頁的功能

實現滑鼠滾動一下頁面就上下翻一頁的效果

相關推薦