移动端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. QWT与QT Designer

    QWT是一套非常不错的开发库,它能结合QT开发,做出非常好的曲线,刻度,表盘等效果来.  qwt的下载以及动态链接库的编译等这里就不做介绍了.在源码目录下可以找到designer目录,其中有插件的源码 ...

  2. 将PDF文件中按页截取,并以流的形势返回给客户端

    #需要用到pyPdf库 from pyPdf import PdfFileWriter,PdfFileReader from django.http import HttpResponse try: ...

  3. Golang中的信号处理

    信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...

  4. 【quickhybrid】API的分类：短期API、长期API

    前言 一切就绪,开始规划API,这里在规划前对API进行了一次分类:短期API.长期API 首先申明下,这个是在实际框架演变过程中自创的一个概念,其它混合框架可能也会有这个概念,但应该是会在原生底层来 ...

  5. 自学Zabbix3.6.2-触发器triggers severity严重程度

    触发器严重性定义了触发器的重要性. 1. zabbix支持以下触发级别: SEVERITY DEFINITION 颜色 Not classified 未知. 灰色 Information 一般信息. ...

  6. httpd路径映射和重定向

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. redis的sorted set类型

    1.简单描述 和set类型一样,sorted set也是string类型元素的集合,不同的是每个元素都会关联一个double类型的score.sorted set的实现是skip list和hash ...

  8. 10个最有用的 IntelliJ IDEA 插件

    IntelliJ IDEA鼓舞了许多Java开发人员编写插件,从J2EE到代码编辑工具再到游戏.现在,它拥有了一个强大的插件生态系统,超过1500可用的插件以及几乎每周都有新的插件出现.在这篇文章中, ...

  9. 小谈iOS屏幕适配问题

    首先,我么我们要观察一下5,6和6Plus的尺寸比例关系.发现了他们的关系后待会做兼容就明白了. 很明显能看出这三种屏幕的尺寸宽高比是差不多的,因此可以在5的基础上,按比例放大来兼容6和6Plus的屏 ...

  10. 《算法 (第4版)》【PDF】下载

    <算法 (第4版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196349 (第4版)>[PDF]"  TITL ...