移动端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. 使用FlexPaper实现在线预览

    准备工作 1.下载并安装安装OpenOffice 2.下载并安装FlexPaper 3.下载jodconverter 5.下载并安装swftools 软件安装具体方式按照 这篇博客 :http://b ...

  2. Git 二分调试法，火速定位疑难Bug！

    你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码.屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样 ...

  3. JVM垃圾收集相关经常使用參数

    參 数 描 述 UseSerialGC 虚拟机执行在Client 模式下的默认值,打开此开关后,使用Serial + Serial Old 的收集器组合进行内存回收 UseParNewGC 打开此开关 ...

  4. poj 1860 Currency Exchange （SPFA、正权回路 bellman-ford）

    链接:poj 1860 题意:给定n中货币.以及它们之间的税率.A货币转化为B货币的公式为 B=(V-Cab)*Rab,当中V为A的货币量, 求货币S通过若干此转换,再转换为原本的货币时是否会添加 分 ...

  5. sed从入门到深入修炼目录

    sed系列文章: sed修炼系列(一):花拳绣腿之入门篇sed修炼系列(二):武功心法(info sed翻译+注解)sed修炼系列(三):sed高级应用之实现窗口滑动技术sed修炼系列(四):sed中 ...

  6. 「mysql优化专题」视图应用竟然还可以这么优化？不得不收藏（8）

    一.视图概述(技术文): (1)什么是视图? 视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个数据库中的真实的表中的字段.视图并不在数据 ...

  7. Intellij IDEA更新SVN没有提示语

    更新SVN时IDE下方没有提示语句 解决方法: 点击编辑器右下方的 Event Log 按钮 打开 Show balloons 就可以显示了.

  8. 《极客与团队》【PDF】下载

    <极客与团队>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196337 内容简介 软件开发是一项团队运动,人的因素对结果的影响完全 ...

  9. 在Eclipse中创建Django项目

    在以前的分享中,我们是在命令行模式下创建Django项目的,那么,如何在IDE中使用Django呢? 本文将介绍如何在Eclipse中创建Django项目. 首先,新建Django项目mysite,如 ...

  10. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...