移动端H5页面惯性滑动监听

　　在移动端，当你快速滑动有滚动条的页面时，在你手指离开屏幕时，滚动并不会立即停止，而是会随着“惯性”继续滑动一段距离。

　　在做项目的过程中，需要监听惯性滑动整个过程。在网上并没有找到相应的监听事件，于是就自己写了一个监听方法。

　　惯性滚动开始时调用的方法是listenSlidingA，结束时调用的方法是listenSlidingEndA。

 <!DOCTYPE html>

 <html>

 <head>

     <title>滚动监听</title>

     <style type="text/css">

         .scoll-x-window{

             height: 900px;

             width: 600px;

             overflow-x:auto;

             overflow-y:hidden;

             border:1px solid black;

         }

         .scoll-x-base{

             position:relative;

             height:96%;

             top:2%;

             width:4800px;

             overflow-x:hidden;

             overflow-y:auto;

         }

         .scoll-x-panl{

             position:relative;

             width: 590px;

             margin-right: 10px;

             height: 100%;

             float: left;

             background-color: orange;

         }

     </style>

     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

     <script type="text/javascript">

         var pageInfo ={};//页面数据记录

         $(document).on("touchend",".scoll-x-panl",listenSlidingA);

         function listenSlidingA(){

             listenSlidingCore("SCOLL_X_WINDOW","listenSlidingEndA()");

         }

         /**

          * 监听滚动核心事件

          * windowId：滚动的窗口,callBackFun:回调方法

          */

         function listenSlidingCore(windowId,callBackFun){

             pageInfo.scollWidth = $("#" + windowId ).scrollLeft();

             //一次滚动只会触发一次位置纠正，所以要覆盖掉上一次延时任务

             clearTimeout(pageInfo.timeoutListener);

             pageInfo.timeoutListener = setTimeout(function(){

                 if(pageInfo.scollWidth == $("#" + windowId ).scrollLeft()){

                     try{

                         eval(callBackFun);

                     }catch(e){

                         console.log("出错了:" + e);

                     }

                 }else{

                     listenSlidingCore(windowId,callBackFun);

                 }

             }, 100);

         }

         function listenSlidingEndA(){

             console.log("执行到了回调函数：listenSlidingEndA");

         }

     </script>

 </head>

 <body>

     <div class="scoll-x-window" id="SCOLL_X_WINDOW">

         <div class="scoll-x-base"  >

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

             <div class="scoll-x-panl"></div>

         </div>

     </div>

 </body>

 </html>

　　该方法是实现 面板滚动中的一个步骤，面板滚动的过程是 1：监听面板的滑动（包括惯性滑动）2：滑动停止后修正面板位置，将最近的面板居中3：高亮底部相应的快捷链接。若你有面板滚动中的相关疑问，欢迎留言交流

　　转载请注明出处：http://www.cnblogs.com/ttjsndx/p/8251593.html

移动端H5页面惯性滑动监听的更多相关文章

  1. 完美解决移动端H5页面的滑动穿透问题

    同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrol ...

  2. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. 使用swipecard实现卡片视图左右滑动监听以及点击监听

     前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...

  4. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  5. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  6. 移动端（IOS）iframe监听不到 onscroll 事件

    问题描述: 我在一个页面A中有瀑布流,点击瀑布流中的图片需要进入到另外一个页面B,点击返回需要回到页面A中点击的位置,为了实现该效果所以在页面A中嵌入iframe,iframe指向页面B,页面B中同样 ...

  7. Listview的OnScrollListener的滑动监听实现分页加载

    //---------------主布局文件---------------------------- <ListView android:layout_width="fill_pare ...

  8. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  9. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

随机推荐

  1. 《RabbitMQ Tutorial》译文 第 5 章 主题

    原文来自 RabbitMQ 英文官网的教程(5.Topics),其示例代码采用了 .NET C# 语言. In the previous tutorial we improved our loggin ...

  2. javascript变量：全局？还是局部？这个得注意

    在JS中.是没有块级作用域的 举两个个样例: if语句块:     if (true){ var name='Ling'; } alert(name); 输出:Ling for语句块; for(var ...

  3. 【剑指offer】扑克牌的顺子

    个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想測測自己的手气,看看能不能抽到顺子,假设抽到的话,他决定去买体育彩票,嘿嘿! ."红心A,黑桃3,小王,大王,方片 ...

  4. Node.js显示页面

    首先我们先要下载并安装Nodejs,然后进入Node.js中安装supervisor, npm -g install supervisor -g表示全局模式 (无论windows哪一个用户登陆都可以使 ...

  5. intellij idea 主题大全，看不惯idea 那2种主题的来这里了

    一直用默认的主题,但是白色的背景看久了会晃眼睛.所以打算换成黑色的. 不过Intellij只有两种主题,Default和Darcula. 现在只能自己手动安装一个了.新主题需要满足, 看久了不会太累. ...

  6. Error:Execution failed for task ':app:mergeDebugResources'. > Crunching Cruncher ******.9.png

    有时候在Android Studio导入Eclipse项目时,会出现Error:Execution failed for task ':app:mergeDebugResources'. > C ...

  7. DotNetCore跨平台~为Lind.DotNetCore框架添加单元测试的意义

    回到目录 单元测试大叔认为有几下两个必要的作用,也是为什么要上单元测试的原因 组件,框架在修改和BUG解决后,进行正确性的测试,然后才能打包 业务模块,主要提现在进行业务规则的模拟上面,保证了业务逻辑 ...

  8. 【java】文件复制的简单实现

    package 文件操作; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  9. JavaWeb之Java Servlet完全教程（转）

    Servlet 是一些遵从Java Servlet API的Java类,这些Java类可以响应请求.尽管Servlet可以响应任意类型的请求,但是它们使用最广泛的是响应web方面的请求. Servle ...

  10. iOS OC环信实时语音切换听筒免提听不到声音报错：AVAudioSessionErrorCodeBadParam

    出现这个报错:AVAudioSessionErrorCodeBadParam 先看看你的问题是不是在切换听筒免提的时候 听不到声音了, 不是的可以继续搜索去了   问题在这里 把圈住的那个货换成这个就 ...