xxm0720 2018-01-10 03:29 采纳率: 0%
浏览 2995
已结题

在手机浏览器中,先window.scroll滚动到一定的位置,再用手滑动页面,页面会回顶部

在手机浏览器中,先window.scroll滚动到一定的位置,再用手滑动页面,页面会回顶部,从顶部跟随手指移动

if(!!sessionStorage.getItem("scrollTop")){
window.scrollBy(0,sessionStorage.getItem("scrollTop"));
}

             childBox.addEventListener('touchstart', function (e) {

            lastY = startY = e.touches[0].clientY; //觸摸點相對瀏覽器的位置
            //console.log("currY" + currY)

            //起始時間和位置
            lastMoveStart = lastY;
            lastMoveTime = Date.now();
            stopInertiaMove = true;
        });
        childBox.addEventListener('touchmove', function (e) {

            e.preventDefault(); //防止打開連接
            moveY = e.touches[0].clientY;
            distanceY = moveY - startY;



            Com.removeTransition();
            if (distanceY <= 0) {

                Com.setTranslateY(currY + distanceY);

                //超過30時,顯示滑動信息
                if ((currY + distanceY) >= maxSwipe - 30) {
                    LeXinIntance.find(".LexinSlideDown").show();

                } else if ((currY + distanceY) <= minSwipe + 30) {
                    LeXinIntance.find(".LexinSlideUp").show();
                }

                if (!IsPc) {
                    var pare_h = LeXinIntance.height();
                    var wrap_h = $("body").height() - 50;
                    var CanScrollHeight = wrap_h - pare_h;
                    //matrix(1, 0, 0, 1, 0, -11) //獲取已經異動的高度



                    scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    //console.log("scrollTop" + scrollTop + "," + CanScrollHeight);
                    if (Number(scrollTop) >= (Math.abs(CanScrollHeight) - 30)) {

                        //LeXinIntance.find(".LexinSlideUp>span:nth-of-type(2)").text("laoding next page")
                        LeXinIntance.find(".LexinSlideUp").show();

                    } else if (scrollTop > 10) {
                        LeXinIntance.find(".LexinSlideDown").show();
                        //LeXinIntance.find(".LexinSlideDown>span:nth-of-type(2)").text("laoding prepage")

                    } else {

                        //LeXinIntance.find(".LexinSlideDown>span:nth-of-type(2)").text("Click or slide down Load prepage");
                        //LeXinIntance.find(".LexinSlideUp>span:nth-of-type(2)").text("Click or slide up Load next page");
                    }
                }
            }
            ismove = true;

            /**
             * 缓动代码
             */
            var nowTime = Date.now(); //滑動當前時間
            stopInertiaMove = true; //表示滑動過
            //滑動時間超過0.3秒重置起始時間和位置
            if (nowTime - lastMoveTime > 300) {
                lastMoveTime = nowTime;
                lastMoveStart = moveY;
            }

        });
        childBox.addEventListener('touchend', function (e) {
            //console.log("ismove" + ismove)
            if (ismove) {
                /*记录当前的定位   上一次当前的定位 + 这一次改变的定位*/
                currY = currY + distanceY;

                if (!IsPc) {

                    var pare_h = LeXinIntance.height();
                    var wrap_h = $("body").height() - 50;
                    var CanScrollHeight = wrap_h - pare_h;
                    scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    if (Number(scrollTop) >= (Math.abs(CanScrollHeight) - 30)) {
                        LeXinIntance.find(".LexinSlideUp").hide();
                        //LeXinIntance.find(".LexinSlideUp>span:nth-of-type(2)").text("Click or slide up Load next page");                        
                        //var comLi = LeXinIntance.find(".on").find("*").length;
                        SliderupLoad();
                        //if (comLi == LeXinIntance.find(".on").find("*").length) {                                                           
                        //    LeXinIntance.find(".LexinSlideUp>span:nth-of-type(2)").text("is bottom");
                    }

                    else {
                        //慣性滾動
                        var nowY = e.changedTouches[0].clientY;
                        var nowTime = Date.now();

                        var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
                        stopInertiaMove = false; //停止滑動                           
                        (function (v, startTime) {
                            var dir = v > 0 ? -1 : 1; //加速度方向 向下滑動v>0加速度dir<0,向上滑v<0加速度dir>0
                            var deceleration = dir * 0.002; //每次速度減少量
                            var duration = v / deceleration; // 速度消减至0所需时间
                            var dist = v * duration / 2; //最终移动多少 0~V的平均速度 移動duration長時間的距離
                            //console.log("v" + v);
                            //console.log("inertiaMove" + dir + "," + deceleration + "," + duration + "," + dist + "," + currY + "," + startTime);
                            Com.removeTransition(); //取消動畫效果,採用setTimeout取代
                            function inertiaMove() {
                                if (stopInertiaMove)
                                    return;
                                var nT = Date.now();
                                var t = nT - startTime;
                                var nowV = v + t * deceleration;
                                // 速度方向变化表示速度达到0了
                                if (v * nowV <= 0) {
                                    return;
                                }
                                var mY = (v + nowV) / 2 * t;
                                //console.log("t" + t + "," + currY + "," + CanScrollHeight + "," +v + "," + nowV + "," +mY);
                                //console.log("mY" + mY);
                                if (currY <= 0) {
                                    if (currY + mY > 0 && dir == -1) {
                                        //已到頂
                                        //console.log("已到頂");
                                        currY = 0;
                                        Com.setTranslateY(currY);

                                        return;
                                    } else if (currY + mY < CanScrollHeight && dir == 1) {
                                        //已到底 -200<-135
                                        //console.log("已到底" + CanScrollHeight);
                                        currY = CanScrollHeight;
                                        //Com.addTransition();
                                        Com.setTranslateY(CanScrollHeight);
                                        return;
                                    } else {
                                        currY = currY + mY;
                                        Com.setTranslateY(currY);
                                        setTimeout(inertiaMove, 10);
                                    }
                                }
                            }
                            inertiaMove();
                        })(v, nowTime);
                    }
                }

                /*重置所有的参数  不重置currY */
                startY = 0;
                moveY = 0;
                distanceY = 0;
                ismove = false;
            }

        });           


                    setTranslateY: function (y) {

            window.scrollTo(0, Math.abs(y));

        }
  • 写回答

5条回答

  • 小哲爱奔跑 2018-01-10 03:33
    关注

    手指按下的事件,应该作了相应处理吧, 你还是仔细看一看代码吧,没贴出来不好回答呢。

    评论

报告相同问题?

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置