liuchuanwei/mynotes: 我的笔记 @ 6600bc20da4e238758c8636d5eb11a7397630fc8

参考自 JS滚轮事件(mousewheel/DOMMouseScroll)了解
页面代码改造自原生JS实现全屏滚动（无滚动条）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 0;
			}
			.box {
				position: relative;
				width: 100%;
				height: 100vh;
				overflow: hidden;
			}
			ul {
				position: relative;
			}
			li {
				width: 100%;
				height: 100vh;
				font-size: 30px;
				position: relative;
				display: flex;
				justify-content: center;
				text-align: center;
			}
			
			.nav {
				position: fixed;
				right: 2%;
				top: 35%;
			}
			.nav li {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				border: 1.5px solid #000;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul style="transition: 0.5s ease; top:0;">
				<li>一页面</li>
				<li>二页面</li>
				<li>三页面</li>
				<li>四页面</li>
			</ul>
		</div>
		<div class="nav">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			/**
			 * 简易的事件添加方法封装
			 */
			var addEvent = (function(window, undefined) {
				var _eventCompat = function(event) {
					var type = event.type;
					if (type == 'DOMMouseScroll' || type == 'mousewheel') {
						event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
					}
					//alert(event.delta);
					if (event.srcElement && !event.target) {
						event.target = event.srcElement;
					}
					if (!event.preventDefault && event.returnValue !== undefined) {
						event.preventDefault = function() {
							event.returnValue = false;
						};
					}
					/*
					   ......其他一些兼容性处理 */
					return event;
				};
				if (window.addEventListener) {
					return function(el, type, fn, capture) {
						if (type === "mousewheel" && document.mozFullScreen !== undefined) {
							type = "DOMMouseScroll";
						}
						el.addEventListener(type, function(event) {
							fn.call(this, _eventCompat(event));
						}, capture || false);
					}
				} else if (window.attachEvent) {
					return function(el, type, fn, capture) {
						el.attachEvent("on" + type, function(event) {
							event = event || window.event;
							fn.call(el, _eventCompat(event));
						});
					}
				}
				return function() {};
			})(window);

			// 滚动锁
			var mousewheelLock = false;
			var pageIndex = 0,	// 页码
				pageNum = 4;	// 页数
			// 滚动动画时间	
			var scrollAnimateTime = 1200;
				
			var oUl = document.querySelector("ul");
			var navLis = document.querySelectorAll(".nav li");
			navLis[pageIndex].style.background = 'black';
			
			/** 添加鼠标滚轮事件 **/
			addEvent(oUl, 'mousewheel', function(event) {
				if (mousewheelLock) return ;
                mousewheelLock = true;
                // 向下滚动
                if (event.delta < 0) {
                    nextPage();
                } else {	// 向上滚动
                    prevPage();
                }
                setTimeout(function(){
                    mousewheelLock = false;
                }, scrollAnimateTime);
			});
			// 下一页
			function nextPage() {
				if (pageIndex < pageNum-1 ) {
					changePage(pageIndex++);
				}
			}
			// 上一页
			function prevPage() {
				if (pageIndex > 0 ) {
					changePage(pageIndex--);
				}
			}
            // 改变页面
			function changePage(selectedPageIndex) { 
				oUl.style.top = -selectedPageIndex * 100 + 'vh';
				for (var i=0; i<navLis.length; i++) {
					navLis[i].style.background = 'white';
				}
				navLis[pageIndex].style.background = 'black';
			}

		</script>
	</body>
</html>
鼠标滚轮滚动翻页.md 3.8 KB Historique Raw

鼠标滚轮滚动翻页.md 3.8 KB

Historique Raw
