手机端实现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的也会有，具体看时间啦），有需要的可以过来看看吆!

posted @   Mr.聂  阅读(4757)  评论(3)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
历史上的今天：
2017-05-21 瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）
点击右上角即可分享
微信分享提示