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

在手机浏览器中,先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));

        }
0

5个回答

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

2
xxm0720
xxm0720 你是说touchstart的事件应该做处理
一年多之前 回复

把代码贴出来看看,分析分析。

0

是不是滑动模块那里的参数有问题呢

0

滑动参数是否出现问题

0

滑动参数有没有出现问题

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html页面滚动到一定位置显示回到顶部按钮
回到顶部按钮在很多页面中都会用到,具体实现效果如下: 当页面滚动到一定位置时,页面右下侧出现固定按钮: 当鼠标移到按钮上方时,有一定的动画效果: &amp;lt;div class=&quot;t-right-bar&quot;&amp;gt; &amp;lt;div class=&quot;t-bar-support&quot; data-open-online-form&amp;gt;&amp;lt;a href=&quot;index.php?a=support&amp;amp;c...
vue页面切换到滚动页面显示顶部
vue页面切换到滚动页面显示顶部     在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示。 一、目标: ‘listview’进入详情页面时详情页面从页面顶部开始显示。 二、让首先查了下两个页面的scrollY,每次都是不一样的,也没
点击缓慢滑动返回顶部
点击缓慢滑动返回顶部 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置。 使用setinerval实现缓慢返回顶部 //核心js代码 var top=document.getElementById(&amp;quot;backTop&amp;quot;); var bottom=document.getElementById(&amp;quot;...
百度输入框 获取焦点时 滚动到页面顶部的实现
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;百度输入框 获取焦点时 滚动到页面顶部的实现&amp;lt;/title&amp;gt; &amp;lt;meta name=&quot;viewport&quot;
滚动一定距离后,导航固定到窗口顶部
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;  &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; &amp;lt;title&amp;gt;滚动一定距离导航栏固定&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; * {
跳转到某个页面时实现瞬间滚动到某个位置的实现
知识点: window.scrollTo() 方法和查询参数 location.search 使用 angular4 的实现: window.scrollTo() 方法 作用:滚到文档中的某个坐标 window.scrollTo(x-coord,y-coord ) window.scrollTo(options) window.scrollTo({top:num,left:num,b...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容
template里面: &amp;lt;!-- tab切换star --&amp;gt; &amp;lt;ul class=&quot;tab-list&quot; :class=&quot;{fixTitle:whether}&quot;&amp;gt; &amp;lt;li @click=&quot;curId=0&quot; :class=&quot;{'cur':curId===0}&quot;&amp;gt;产品特点&amp;lt;/li&amp;gt;
页面滚动到指定位置导航栏固定顶部
页面滚动到指定位置导航栏固定顶部
CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;
当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用postion:alsolute;来进行定位的话,顶部导航就回随着我页面的移动而移动。不会将导航下面的内容移动后,就自动以position:fixed的样子来显示顶部导航区域。下面我放一张京东的导航图的效果,更直观的显示,我想要实现的大致操作。注意顶部京东搜索的那个框:想要
标题栏颜色渐变和顶部悬浮效果(标题栏颜色随着页面上滑渐变,页面某模块到达标题栏下方是位置固定,不再随页面滚动)
购物类App在商品详情页面经常有一种效果,随着页面上滑顶部标题栏的颜色随之渐变,当商品评论,商品介绍等选项卡到达标题栏下方时,选项卡位置不再随着页面移动,固定在标题栏下方(具体效果可以查看Tao宝)。为达到上述效果,我简单写了个Demo(页面很丑)下面是效果图:(忽略页面很丑)这是页面最初效果这是页面上滑过程中标题栏颜色渐变这是标题栏颜色变化后的最终效果和蓝色固定的悬浮模块这是悬浮模块到达顶部后不再
页面滚动到一定位置后 元素滑出显示
元素滑出之前 和之后的位置是不一样的 滑出之前 opacity: 0; 之后为 1&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt;     &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;     &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt;     &amp;lt;style&
JQ:当页面滚动到一定位置之后,让元素固定在顶部,小于位置后恢复原来的位置
项目背景:一天小虎找到龙哥说,龙哥你有没有现成的JS板子,就是那种当页面滚动到某个位置时,页面中的某个元素则固定在顶部不在滚动,而小于这个位置之后这个元素又恢复到原来的状态。实现:这里做了一个简单的实现,前提是不要考虑浏览器兼容了,如果你要考虑,就自己解决吧,对一个前端来说这应该
页面滚动到一定的距离时,导航条绝对定位
window.onload=function(){ var node = document.getElementById(“node”) H = 0 Y = node(node到body最上方的距离 求出H) while (Y) { H += Y.offsetTop; (子元素距离父元素的距离) 元素加的是这个元素到整个bo
js,html 监听页面滚动高度 点击返回顶部
自己上代码比较容易:这边是es6的写法,可以封装成一个组件,这样每个界面都可以用了/** * Created by wuyakun on 2017/4/28. */import React from 'react';//点击返回顶部class BackTop extends React.Component { // 渲染之后 componentDidMount() {
页面滚动到顶部功能以及按钮隐藏显示
在页面中内容很多时,常常需要一键置顶的功能。即页面的右下角会显示一个向上的箭头,点击一下,就直接滚动到页面最上面。当滑动到第一页时,此时不需要置顶,置顶的箭头自动隐藏。 大家观察一下,内容较多在门户网站,例如新浪、网易均有这样的功能。那这个小功能是如何实现的呢? 直接上代码吧 &amp;lt;div class=&quot;content&quot;&amp;gt; &amp;lt;p&amp;gt;等你, 在雨中, 在造虹的雨中 ...
浏览器滚动到一段距离,绝对定位的导航出现
具体效果是,浏览器滚动到一定距离的时候,fixed绝对定位的导航会显示,当滚动到小于这个距离的时候,导航会隐藏。 js部分:     function getTop() {         var mytop = $(document).scrollTop();         if (mytop > 400) {             $(".fixed_bann
ios 添加scrollView滚动到一定程度的方法。
  //- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset //{ //    SJBLog(@&quot;====%f,,,%f&quot;,velocity.y,...
mui滑动到顶部方法
 $('#build_li').removeClass(&quot;mui-active&quot;); mui('#offCanvasSideScroll').scroll().scrollTo(0, 0)
js实现html页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置。
实现代码         test             *{             padding:0;             margin:0;         }         #header{             position: fixed;             top: 0;             left: 0;  
JS实现滚动监听以及滑动到顶部
以前做滚动监听都是用jquery来实现这样的效果,虽然用jquery实现起来很方便,但是还是想用原生js来实现一下。HTML代码:<div class="uptop" id="uptop"> <img src="images/up.png" id="to-top">//这里用了一个向上的箭头图片,用于表明返回顶部 </div>CSS代码:.uptop{ positio
滚动一定距离实现标题悬浮(2种方法)
方法一: JS部分: var middle=document.getElementsByClassName('middle')[0]; window.onscroll=function(ev){ var e=window.event||ev; if(document.documentElement.scrollTop&amp;gt;400){ middle.st...
页面滚动后出现按钮 和 点击按钮返回顶端
首先建立一个div作为置顶按钮,css中定义class为 .totop:.totop{ #code(样式已省略) }JS代码:$(document).ready(function(){ //页面滚动后出现返回顶部的按钮 window.onscroll = function() {scrollFunction()}; function scrollFunction() {cons...
微信小程序滑动页面到指定位置时,固定指定元素在顶部
2018/12/20 20:03 这个需求其实很常见,首先我想到的是利用,微信小程序自带的scroll-view标签来实现,但经过几次实验均发现达不到预期效果。最后查找博客得知可以利用页面Page自带的页面滚动监听事件scrollTopFun来实现,试了以下果然成功了,稍后效果图出来了再放上来,这里先记录一下。 scrollTopFun:function(e){ console.lo...
原生js window.scrollTo平滑滚动到页面的某个位置
window.scrollTo() 语法1:   window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。 例子:   window.scrollTo(0,1000); // 垂直滚动到1000的位置 语法2:  window.scrollTo(options) top 等同于  y-coord ...
使用JQ完成div滑动到一个位置开始固定
文章转自原创博客 http://www.xdx97.com/#/single?bid=ea8efa62-90c2-89c3-8af5-81133ad51ecf                          
js平滑滚动到头部、顶部以及指定位置
js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置 滚动到顶部: $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
js 滚动到指定位置显示或隐藏元素
$(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_top) if(scroll_top>=200){ $("#lianxi").fadeIn(); }el
实现滚动到一定位置时,导航栏置顶的效果
html部分: &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;标题1&amp;amp;lt;/h1&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;标题2&amp;amp;lt;/h1&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;标题1&amp;amp;lt;/h1&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;标题2&amp;amp;lt;/h1&amp
页面滚动到某个位置,视频开始播放
1.控制视频自动播放昨天想让页面滚动到视频播放器的时候,视频才自动播放,一开始用的设置autoplay=autoplay,后来发现不行。百度说:jQuery只是操作了DOM的属性,虽然为标签成功加上了autoplay属性,但视频框架早已经加载完成了,后加上的autoplay属性对其没有作用。应使用HTML5 Video自带的API来控制视频播放,下面的例子实现了鼠标悬停到视频上方自动播放,鼠标移出...
添加遮罩时禁止滚屏,同时已经滚动的页面不会跑到最顶部去然后划不动
1,弹出遮罩层之后,给body 加overflow:hidden,这样会导致一个问题,是已经滑动的页面,会重新滑动到顶部,这种体验效果是很差的。 2,第二方案,首先给body自己一个overflow:auto,然后在执行操作1。但是在IOS适配时,会出现滚动卡顿,没有滑动的惯性,方案二失败。
如何让CoordinatorLayout内容滚动到顶部?
我们在使用
Angular封装指令回到顶部以及滚动到特定的页面位置
主要是使用angular的指令系统来自己封装一个指令。其写法有多种,这里只是很简单的一种写法。 HTML片段代码1:                                                           HTML片段代码2:                 js指令: myApp.directive("goY
页面向下滚动一定距离显示固定搜索框
如淘宝首页那样,页面滚动到一定距离时,显示头部的搜索框。 具体代码很简单://屏幕向下走多高的距离,出现little-logo $(window).scroll(function(){ if($(window).scrollTop() > 167){ $('.little-logo').show(); }else{
点击导航栏页面滚动到指定显示位置---animate动画
animate动画 example: html: &amp;lt;ul&amp;gt; &amp;lt;li class=&quot;head_nav_li&quot; data-value=&quot;index&quot;&amp;gt; &amp;lt;a href=&quot;###&quot; class=&quot;product_li_a&quot; onclick=&quot;body_scroll('top')&quot;&amp;gt;aaaa&
微信小程序--特定区域滚动到顶部时固定
项目要求: 如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样。 以下是代码展示: 1.wxml &amp;amp;amp;lt;scroll-view style=&amp;amp;quot;width:100%;height: 100%;&amp;amp;quot; scroll-y=&amp;amp;quot;true&amp;amp;quot; bindscroll=&amp;amp;quot;scrollTopFun&amp;amp;quot;&amp;
AppbarLayout 自动滚动到指定位置
Appbarlayout 可是展示scrim,如果不想展示,可以使用方法滚动到指定位置:android.support.design.widget.CoordinatorLayout.Behavior behavior = ((android.support.design.widget.CoordinatorLayout.LayoutParams)appBarLayout.getLayoutPar
React实现元素块随页面滚动而固定在浏览器顶部的一种方式
  有一个需求:一个元素块A本来在页面中的正常位置,随着滚动条向下滚动到该元素块时变为固定在浏览器顶端,当滚动条向上滚动到元素块A时又恢复到原来的位置。   解决方法: 我们首先在react组件中添加一个boolean类型的状态needFixed,用于判断该元素块A是否需要固定。 然后在通过document.getElementById('A_ID').offsetTop获取需要固定的元素块A距...
【转】js在页面滚动到一定位置时触发事件?
function getTop(e) { var offset=e.offsetTop; if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度 offset+=getTop(e.offsetParent); return offset; } var myBlockTop = getTop(do
顶部固定显示;某模块的标题栏在滚动时固定显示;到底部时显示底部banner;回到顶部。4个效果
JQuery实现4个效果, 1. 顶部导航菜单固定显示。 2. 某模块的标题栏在滚动时固定显示在顶部,回滚时原来位置显示。 3. 滚动到最底部时,显示底部banner。 4. 回到顶部。
Jquery实现滚动条滚到一定高度时,导航栏固定
Jquery实现滚动条滚到一定高度时,导航栏位置固定
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 先刷题还是先学习java 机器学习一定需要大数据吗