提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript 仿 fullPage.js 实现全屏滚动

JavaScriptJS 实现 滚动 全屏
2023-09-11 14:22:55 时间

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

  • 修改原先的滚动机制
  • 使用绝对定位，滚动即为修改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>

相关文章