JavaScript 仿 fullPage.js 实现全屏滚动

深藏阁楼爱情的钟 2022-04-05 18:08 274阅读 0赞

实现全屏滚动主要有两种方式：

*  修改原先的滚动机制
 *  使用绝对定位，滚动即为修改top。优点是可以用CSS实现动画，缺点是需要手写移动事件。

下面的代码用的是第一种方案

实现原理用了 “节流” 的那套方案，但却不能直接套 “节流函数” 因为需要 preventDefault

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style type="text/css">
    body {
    	margin: 0;
    }
    </style>
    <script>
    function createPage(count) {
    	const part = parseInt(360 / count);
    	const section = document.body.appendChild(document.createElement("section"));
    	for(let i=0; i<count; i++) {
    		const article = document.createElement("article");
    		article.className = "page";
    		article.style = "height:100vh;background-color:hsl(" + part*i + ",50%,50%)";
    		section.appendChild(article);
    	}
    }
    function bindWheel() {
    	const count = document.querySelectorAll(".page").length;
    	let lastScrollTime = new Date().getTime();
    	const scrollInterval = 1000;
    	let currentPage = 0;
    	let perHeight = document.body.clientHeight / count;
    	const scrollFunc = event=>{
    		const time = new Date().getTime();
    		if(time - lastScrollTime > scrollInterval) {
    			lastScrollTime = time;
    			console.log(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop);
    			//firefox和chrome是window.pageYOffset和document.documentElement.scrollTop
    			const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    			currentPage = parseInt(scrollTop / perHeight);
    			console.log(event.detail, event.wheelDelta);
    			//firefox用的是event.detail，+3表示为向下滚动，-3表示向上滚动；其它浏览器用的是wheelDelta，+120表示向上，-120表示向下
    			if((event.detail && event.detail > 0) || (event.wheelDelta && event.wheelDelta < 0)) {
    				currentPage++; 
    				if(currentPage >= count) currentPage = 0;
    			} else {
    				currentPage--;
    				if(currentPage < 0) currentPage += count;
    			}
    /*
    window.scrollY是只读的属性
    
    window.scrollTo(options)
    top 	等同于  y-coord
    left 	等同于  x-coord
    behavior  类型String,表示滚动行为,支持参数.smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
    
    注意：这里当快速滚动鼠标中键的时候，scrollTo(behavior:smooth)会发生错误，虽然也只被调用一次
    */
    			//window.scrollTo({top:currentPage * perHeight, behavior:"smooth"});
    			//window.scrollTo(0, currentPage * perHeight);
    			
    			const target = currentPage * perHeight;
    			const animCount = 10;
    			const animStep = (target - scrollTop) / animCount;
    			let animIndex = 0;
    			const scrollAnim = ()=>{
    				if(animIndex < animCount) {
    					animIndex++;
    					//最好用scrollTo来指明一个确定的位置，因为scrollBy是相对位置，如果在by的途中resize会动画会有点失常
    					window.scrollBy(0, animStep);
    					//window.scrollTo(0, scrollTop + animIndex * animStep);
    					window.requestAnimationFrame(scrollAnim);
    				} else {
    					//校正位置
    					window.scrollTo(0, target);
    				}
    			}
    			window.requestAnimationFrame(scrollAnim);
    		}
    		event.preventDefault();
    	}
    	document.addEventListener("DOMMouseScroll", scrollFunc, false);
    	document.onmousewheel = scrollFunc;
    	window.addEventListener("resize", ()=>{
    		perHeight = document.body.clientHeight / count;
    		window.scrollTo(0, currentPage * perHeight);
    	}, false);
    }
    window.onload = ()=>{
    	createPage(5);
    	bindWheel();
    }
    </script>
    </head>
    <body>
    </body>
    </html>