好吧，第一次写，比想像中的花时间呢，总算是写好了。也好久没写博客了，就发上来看看吧！
说明：就是一个很普通的单屏滚动效果，一次滚一屏那样子。
PS：有了这个，再加上TimelineMax，那不就~~ <(￣︶￣)>
PS2：用的是touch事件，只有在手机浏览器或像chrome手机模拟器之类的浏览器中才能看到效果！
<!DOCTYPE html>
<html>
<head>
<title>js单屏滚动</title>
<meta charset=‘utf-8‘/>
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{height: 100%; margin: 0; padding: 0;}
.page{height: 100%; font-size: 30em; text-align: center; background-color: rgb(68, 164, 168);}
</style>
<!-- 引入GSAP -->
<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js‘></script>
<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js‘></script>
<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js‘></script>
<script type="text/javascript">
//定义初始屏
var currentPage = 1;
//定义初始触点纵坐标
var old_clientY = 0;
var new_clientY = 0;
//定义屏幕高度
var stage = document.body || document.documentElement;
var stageHeight = stage.clientHeight;
//定义屏幕个数
var pageNum = 4;
//禁止屏幕滚动
window.addEventListener(‘touchmove‘,function(ev){
ev.preventDefault();
});
window.addEventListener(‘touchstart‘,function(ev){
old_clientY = ev.changedTouches[0][‘clientY‘];
});
window.addEventListener(‘touchend‘,function(ev){
new_clientY = ev.changedTouches[0][‘clientY‘];
//滚动超过30个像素就不滚动
if(Math.abs(new_clientY - old_clientY) < 30) return;
if(new_clientY > old_clientY){//住下拉向上滚
currentPage--;
if(currentPage < 1) currentPage = 1;
}else{//住上拉向下滚
currentPage++;
if(currentPage > pageNum) currentPage = pageNum;
}
TweenLite.to(‘body‘, 0.8, {scrollTop: (currentPage-1) * stageHeight, ease: Back.easeInOut});
});
</script>
</head>
<body>
<div class=‘page‘>1</div>
<div class=‘page‘>2</div>
<div class=‘page‘>3</div>
<div class=‘page‘>4</div>
</body>
</html>
时间： 2024-10-25 11:24:46