原生JS实现全屏滚动（无滚动条）
程序员文章站
2022-04-18 18:40:57
...
原生JS实现全屏滚动（无滚动条）
写一种十分简单易懂的原生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;
}
li p {
font-size: 30px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<ul style="top: 0;">
<li style="background-color: yellowgreen;">一页面<p>一页面</p>
</li>
<li style="background-color: red;">二页面<p>二页面</p>
</li>
<li style="background-color: skyblue;">三页面<p>三页面</p>
</li>
<li style="background-color: yellow;">四页面<p>四页面</p>
</li>
</ul>
</div>
<script type="text/javascript">
var kai = true,i=0;
var oUl = document.getElementsByTagName("ul")[0];
document.addEventListener('mousewheel', function(ev) {
var ev = window.event || ev;
if (kai) {
kai = false;
oUl.style.transition=" 0.5s ease";
if (ev.wheelDelta < 0&&i<3) {
i++;
}
if (ev.wheelDelta > 0&&i>0) {
i--;
}
setTimeout(function() {
oUl.style.top = -i*100 + 'vh';
}, 0);
// console.log(i)
setTimeout(function() {
kai = true;
}, 1000);
}
});
onresize
window.onresize=function(){
oUl.style.transition="none";
}
</script>
</body>
</html>
上一篇： 你姐夫有对象了吗
下一篇： 关于那些购物网站解决办法