学习 准备 尝试 谨慎小心

0%

鼠标滚轮滚动翻页

发表于 更新于 分类于 ，

参考自 JS滚轮事件(mousewheel/DOMMouseScroll)了解
页面代码改造自 原生JS实现全屏滚动（无滚动条）

1
<!DOCTYPE html>
2
<html>
3
	<head>
4
		<meta charset="utf-8" />
5
		<title></title>
6
		<style type="text/css">
7
			* {
8
				margin: 0;
9
				padding: 0;
10
				font-size: 0;
11
			}
12
			.box {
13
				position: relative;
14
				width: 100%;
15
				height: 100vh;
16
				overflow: hidden;
17
			}
18
			ul {
19
				position: relative;
20
			}
21
			li {
22
				width: 100%;
23
				height: 100vh;
24
				font-size: 30px;
25
				position: relative;
26
				display: flex;
27
				justify-content: center;
28
				text-align: center;
29
			}
30
			
31
			.nav {
32
				position: fixed;
33
				right: 2%;
34
				top: 35%;
35
			}
36
			.nav li {
37
				width: 16px;
38
				height: 16px;
39
				border-radius: 50%;
40
				border: 1.5px solid #000;
41
				margin-bottom: 5px;
42
			}
43
		</style>
44
	</head>
45
	<body>
46
		<div class="box">
47
			<ul style="transition: 0.5s ease; top:0;">
48
				<li>一页面</li>
49
				<li>二页面</li>
50
				<li>三页面</li>
51
				<li>四页面</li>
52
			</ul>
53
		</div>
54
		<div class="nav">
55
			<ul>
56
				<li></li>
57
				<li></li>
58
				<li></li>
59
				<li></li>
60
			</ul>
61
		</div>
62
		<script type="text/javascript">
63
			/**
64
			 * 简易的事件添加方法封装
65
			 */
66
			var addEvent = (function(window, undefined) {
67
				var _eventCompat = function(event) {
68
					var type = event.type;
69
					if (type == 'DOMMouseScroll' || type == 'mousewheel') {
70
						event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
71
					}
72
					//alert(event.delta);
73
					if (event.srcElement && !event.target) {
74
						event.target = event.srcElement;
75
					}
76
					if (!event.preventDefault && event.returnValue !== undefined) {
77
						event.preventDefault = function() {
78
							event.returnValue = false;
79
						};
80
					}
81
					/*
82
					   ......其他一些兼容性处理 */
83
					return event;
84
				};
85
				if (window.addEventListener) {
86
					return function(el, type, fn, capture) {
87
						if (type === "mousewheel" && document.mozFullScreen !== undefined) {
88
							type = "DOMMouseScroll";
89
						}
90
						el.addEventListener(type, function(event) {
91
							fn.call(this, _eventCompat(event));
92
						}, capture || false);
93
					}
94
				} else if (window.attachEvent) {
95
					return function(el, type, fn, capture) {
96
						el.attachEvent("on" + type, function(event) {
97
							event = event || window.event;
98
							fn.call(el, _eventCompat(event));
99
						});
100
					}
101
				}
102
				return function() {};
103
			})(window);
104
105
			// 滚动锁
106
			var mousewheelLock = false;
107
			var pageIndex = 0,	// 页码
108
				pageNum = 4;	// 页数
109
			// 滚动动画时间	
110
			var scrollAnimateTime = 1200;
111
				
112
			var oUl = document.querySelector("ul");
113
			var navLis = document.querySelectorAll(".nav li");
114
			navLis[pageIndex].style.background = 'black';
115
			
116
			/** 添加鼠标滚轮事件 **/
117
			addEvent(oUl, 'mousewheel', function(event) {
118
				if (mousewheelLock) return ;
119
                mousewheelLock = true;
120
                // 向下滚动
121
                if (event.delta < 0) {
122
                    nextPage();
123
                } else {	// 向上滚动
124
                    prevPage();
125
                }
126
                setTimeout(function(){
127
                    mousewheelLock = false;
128
                }, scrollAnimateTime);
129
			});
130
			// 下一页
131
			function nextPage() {
132
				if (pageIndex < pageNum-1 ) {
133
					changePage(pageIndex++);
134
				}
135
			}
136
			// 上一页
137
			function prevPage() {
138
				if (pageIndex > 0 ) {
139
					changePage(pageIndex--);
140
				}
141
			}
142
            // 改变页面
143
			function changePage(selectedPageIndex) { 
144
				oUl.style.top = -selectedPageIndex * 100 + 'vh';
145
				for (var i=0; i<navLis.length; i++) {
146
					navLis[i].style.background = 'white';
147
				}
148
				navLis[pageIndex].style.background = 'black';
149
			}
150
151
		</script>
152
	</body>
153
</html>