效果展示
屏幕整屏滚动
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
margin: 0px;
padding: 0px;
text-align: center;
height: 100%;
}
ul {
position: fixed;
width: 100%;
top: 0px;
}
ul,
li {
line-height: 100vh;
margin: 0px;
padding: 0px;
list-style: none;
font-size: 20px;
height: 100vh;
color: white;
transition-duration: 1s;
}
li:nth-child(odd) {
background: rgb(235, 171, 234);
}
li:nth-child(even) {
background: rgb(150, 220, 244);
}
</style>
<body>
<ul>
<li>第一页</li>
<li>第二页</li>
<li>第三页</li>
<li>第四页</li>
<li>第五页</li>
<li>第六页</li>
</ul>
</body>
<script>
let ulDom = document.querySelector('ul')
let liList = document.querySelectorAll('li')
const viewHeight = document.body.clientHeight
let index = 0;
var lastTime = 0;
//监听鼠标滚动
document.addEventListener('mousewheel', function (e) {
//节流
var nowTime = Date.now();
if (nowTime - lastTime > 2000) {
// 更新时间戳
lastTime = nowTime;
if (e.wheelDelta < 0) {
scrollEvent1()
} else {
scrollEvent1('back')
}
} else {
console.log('阻止', );
}
})
// 兼容火狐浏览器的监听事件
document.addEventListener('DOMMouseScroll', function (e) {
//节流
var nowTime = Date.now();
if (nowTime - lastTime > 2000) {
// 更新时间戳
lastTime = nowTime;
//
if (e.detail > 0) {
scrollEvent1()
} else {
scrollEvent1('back')
}
} else {
console.log('阻止', );
}
})
function scrollEvent1(behavior='forward') {
if (behavior ==='forward') {
if (index === liList.length-1) {
return false;
}
index += 1
console.log("鼠标滚轮后滚,看下一页")
ulDom.style.top = -index * viewHeight + 'px'
} else {
if (index === 0) {
return false;
}
index -= 1
console.log("鼠标滚轮前滚,看上一页")
ulDom.style.top = -index * viewHeight + 'px'
}
}
console.log('mousewheel',navigator);
</script>
</html>