手机端实现fullPage——全屏滚动效果
Posted Mr.聂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端实现fullPage——全屏滚动效果相关的知识，希望对你有一定的参考价值。
封装了一个小插件模拟fullPage的全屏滚动效果，比较简单。
特点：
1. 纯js实现，小巧轻便。
2. 兼容性好。苹果、安卓都没问题，暂时没遇到问题机型。
缺点：
1. 仅封装了基础功能，html、css么有去封装。个人觉得不封装更方便大家使用。
接下来看看效果图：
相比效果大家都看到了，接下来看看代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动端滚屏效果</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <style type="text/css"> body,html{ width: 100%; height: 100%; margin: 0; padding: 0; } .g-fullPage{ width: 100%; height: 100%; overflow: hidden; } .g-fullPage div{ width: 100%; height: 100%; text-align: center; line-height: 100%; transition: 0.5s ease-in; } .g-fullPage div:nth-child(1){ background-color: #D5F1FD; } .g-fullPage div:nth-child(2){ background-color: aquamarine; } .g-fullPage div:nth-child(3){ background-color: mediumseagreen; } </style> </head> <body> <div class="g-fullPage"> <div class="f-pageFirst">1</div> <div>2</div> <div>3</div> </div> </body> <script type="text/javascript"> /* mainClass 滑动父容器类名 firstClass 第一页的类名 num 总页数 */ function fullPage(mainClass, firstClass, num) { var startX = 0, //初始横坐标 startY = 0, //初始纵坐标 marginTop = 0, //上下滑动变量 touchNum = 0, //上滑极限，是否可以上滑 touchFlag = true, //可滑动标志 true 可滑动，false 不可滑 bodyHeight = document.body.offsetHeight, page = document.getElementsByClassName(mainClass)[0], pageFirst = document.getElementsByClassName(firstClass)[0]; //获取触摸的初识坐标 page.addEventListener("touchstart",function(e){ e.preventDefault(); startX = e.targetTouches[0].clientX; startY = e.targetTouches[0].clientY; }) //重置触摸的坐标值 page.addEventListener("touchend",function(e){ e.preventDefault(); startX = 0; startY = 0; touchFlag = true; }) //监听并实现 上、下 滑动效果 page.addEventListener("touchmove",function(e){ e.preventDefault(); var newX = e.targetTouches[0].clientX, newY = e.targetTouches[0].clientY; if (newY - startY > 50) { if (touchFlag == true && touchNum > 0) { console.log("下滑"); touchFlag = false; marginTop += 1; touchNum -= 1; pageFirst.style.marginTop = marginTop * bodyHeight+"px"; } } else if (newY - startY < -50) { if (touchFlag == true && marginTop > -num+1) { console.log("上滑"); touchFlag = false; marginTop -= 1; touchNum += 1; pageFirst.style.marginTop = marginTop * bodyHeight+"px"; } } }) } fullPage("g-fullPage", "f-pageFirst",3); </script> </html>
很简单的一个功能，现在简略解释一下代码：
1. 监听 touchstart ，获取触摸初始坐标； 监听 touchmove，获取活动过程中的触摸点坐标，二者做差. >0 下滑；<0 上滑
2. 当滑动纵坐标差值超过50 ，调节div的 marginTop，显示不同div内容
这里面有几个注意点：
1. margin、top等样式，如果写在样式表里，js获取不到，能取到兼容性也不好。具体原因这里不细说了。但是内联样式可以取到。 这里仅做提醒，避免同志们入坑。
2. 记得阻止默认事件。
好啦，个人能力有限，若代码有问题，希望道友们指出，我们共同学习。 喜欢我的博客的朋友可以关注我，近期会出几篇 vue2.0+vuex 的博客（react的也会有，具体看时间啦），有需要的可以过来看看吆!
以上是关于手机端实现fullPage——全屏滚动效果的主要内容，如果未能解决你的问题，请参考以下文章