全屏滚动

通过索引获取屏幕上数跟跳转对应的屏幕位置

let index = 0;
let winHeight = document.documentElement.clientHeight;
//过渡改变
function f() {
	oUl.style.transition = '1s';
}
//窗体大小改变方法
function winResize() {
	winHeight = document.documentElement.clientHeight;
	for(let i in oLi) {
		i < oLi.length ? oLi[i].style.height = winHeight + "px" : false;
	}
	oUl.style.transition = '0s';
	oUl.style.top = 0 - winHeight * index + 'px';
	setTimeout(f);
}
window.onresize = winResize; //窗体改变事件
winResize();

//复位
for (let i=0;i<vnUl.length;i++) {
	vnUl[i].onclick=function(){
		console.log(i);
		index=i;
		oUl.style.top = 0 - winHeight * index + 'px';		
	}
}
//滚动效果
function allScreen(e) {
	var ev = e || window.event;
	ev.wheelDelta ? (ev.wheelDelta < 0 ? (index < oLi.length - 1 ? index += 1 : index = oLi.length - 1) : (index > 0 ? index -= 1 : index = 0)) :
		(ev.detail > 0 ? (index < oLi.length - 1 ? index += 1 : index = oLi.length - 1) : (index > 0 ? index -= 1 : index = 0));
	oUl.style.top = 0 - winHeight * index + 'px';
	document.removeEventListener('mousewheel', allScreen);
	document.removeEventListener('DOMMouseScroll', allScreen);
	//触发限制方法
	function noMouseWheel() {
		document.addEventListener('mousewheel', allScreen);
		document.addEventListener('DOMMouseScroll', allScreen);
	}
	setTimeout(noMouseWheel, 1000);
}
document.addEventListener("mousewheel", allScreen); //滚动事件监听
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值