移动端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. DDD实践

    一. 虽然招聘是主旋律,但技术还是得不断的突破.在.net core的实践中,一开始就瞄准了DDD.需要特别感谢https://github.com/EduardoPires/EquinoxProje ...

  2. java.util.ArrayList、java.util.vector和java.util.LinkedList （JDK 1.8.0_111）

    一.java.util.ArrayList 1.1 ArrayList 继承结构 ArrayList实现了RandomAccess,可以随机访问(其实就是通过数组下标访问):实现了Cloneable, ...

  3. Python爬虫：用BeautifulSoup进行NBA数据爬取

    爬虫主要就是要过滤掉网页中没用的信息.抓取网页中实用的信息 一般的爬虫架构为: 在python爬虫之前先要对网页的结构知识有一定的了解.如网页的标签,网页的语言等知识,推荐去W3School: W3s ...

  4. Ant 给project打包

    写了一段主要的war打包.编译文件复制的 ant 配置文件 xml <?xml version="1.0" encoding="utf-8"? > ...

  5. 为WebClient增加Cookie的支持

    我们经常会在应用程序中使用到WebClient模拟访问网站资源并且进行处理,如果多次访问之间我们希望为他们保存Cookie,换句话说,第一个请求产生的Cookie能自动带到第二个请求的话,可以通过自定 ...

  6. 关于一些常用的linux命令

    作为一个程序员了解linux系统还是很必要的,下面我为大家提供一些linux系统中比较常的命令 一.linux系统命令 1.Cd  进入指定目录 2.ls 显示当前目录下的文件 3.ls-a 显示所有 ...

  7. Java中的包含义

    JAVA提供了强大的应用程序接口,既JAVA类库.他包含大量已经设计好的工具类,帮助程序员进行字符串处理.绘图.数学计算和网络应用等方面的工作.下面简单介绍JAVA核心类库中常用的组建包. 1.jav ...

  8. [转]addEventListener() 方法，事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  9. github not authorized eclipse 关于 代码不能提交到GitHub

    eclipse/myeclipse > menu > window > preferences > general > security > content > ...

  10. InfluxDb中写入重复数据问题解决方案

    1.InfluxDb版本 0.10.3 2.Measurement TodayChargeTimeReport 只有time和Field列,没有Tag列 3.现象:通过定时任务向上面的表中写入数据: ...