移动端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. 物联网设备是如何被破解的？分析一种篡改IoT固件内容的攻击方式

    随着智能硬件进入到人们的生活,人们的生活质量开始有逐步的提高,人们与智能硬件之间的联系更加紧密.同时,智能硬件的安全问题也必须引起高度重视,因为其直接影响到人身安全.社会安全和国家安全.   大家是否 ...

  2. SVG绘图学习总结

    在我们平时做的很多网站项目中都会需要绘制各种各样的二维矢量图形.比如做城市地下管网的断面图.管线管点的坐标位置矢量标识图.钻孔位置或地层剖面图等等.我们有很多中方法来绘制这些矢量图(vml.canva ...

  3. vim 命令整理（自己经常使用）

    vimm(vimsual)是Linux/UNIX系列OS中通用的全屏编辑器. vimm分为两种状态,即命令状态和编辑状态.在命令状态下.所键入的字符系统均作命令来处理.如:q代表退出,而编辑状态则是用 ...

  4. 趋势科技PC-cillin2015，你来公測我发奖！

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  5. Ration Rose2003安装及破解

    曾经学习UML的时候,用的是EA. 近期在看Head First想着画绘图装一下Ration Rose吧.于是就着手開始装.本来网上关于Ration Rose的安装及破解教程非常多,可是我在安装的过程 ...

  6. Maste Note for OCR / Vote disk Maintenance Operations (ADD/REMOVE/REPLACE/MOVE)

    Doc ID 428681.1 Applies to: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 11.2.0.1.0 [R ...

  7. 自学Zabbix3.5.6-监控项item-Value mapping值映射

    zabbix为了显示更人性化的数据,在使用过程中,我们可以将获取到得数据映射为一个字符串.比如,我们写脚本监控MySQL是否在运行中, 一般返回0表示数据库挂了,1表示数据库正常,还有各种各样的监控都 ...

  8. windows 下使用VMware Workstation Pro 工具，ubuntu创建虚拟机

    本文记录windows 下使用VMware Workstation Pro 工具,ubuntu创建虚拟机 的步骤 第一步 [文件] --- [新建虚拟机]   第二步 弹出的新建虚拟机向导对话框 标准 ...

  9. IDEA热部署（一）---解析关键配置。

    本编博客转载自:因为自己在研究热部署,包括热部署那些文件,部署实现的包括那些操作.这一块,所以这篇好博客. http://www.mamicode.com/info-detail-1699044.ht ...

  10. Linux下查看Go语言软件运行情况

    在Linux下,使用"jps"可以查看用Java语言写的软件的运行情况,如果要查看GO语言写的软件的运行情况,可以使用"gops",但这不是系统自带的,需要进行 ...