移动端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页面惯性滑动监听的更多相关文章
- 完美解决移动端H5页面的滑动穿透问题
同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrol ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 使用swipecard实现卡片视图左右滑动监听以及点击监听
前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 移动端（IOS）iframe监听不到 onscroll 事件
问题描述: 我在一个页面A中有瀑布流,点击瀑布流中的图片需要进入到另外一个页面B,点击返回需要回到页面A中点击的位置,为了实现该效果所以在页面A中嵌入iframe,iframe指向页面B,页面B中同样 ...
- Listview的OnScrollListener的滑动监听实现分页加载
//---------------主布局文件---------------------------- <ListView android:layout_width="fill_pare ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
随机推荐
- C++ list forward_list
list,forward_list list:双向链表 forward_list:单向链表 在任何位置添加元素,删除元素都很快,但随机访问元素则很慢 声明和初始化 list<T> l; l ...
- Spring Cloud 自定义ConfigServer
公司需要将系统配置信息中的敏感信息独立存放. 现有系统采用Spring Cloud Config提供配置信息,其中敏感信息主要是Db配置,分解本次需求: (1)数据库配置信息分离(主要是Db信息). ...
- C#将dataGridView中显示的数据导出到Excel（大数据量超有用版）
开发中非常多情况下须要将dataGridView控件中显示的数据结果以Excel或者Word的形式导出来,本例就来实现这个功能. 因为从数据库中查找出某些数据列可能不是必需显示出来,在dataGrid ...
- JAVA随笔篇一（Timer源代码分析和scheduleAtFixedRate的使用）
写完了基础篇,想了非常久要不要去写进阶篇.去写JSP等等的用法.最后决定先不去写.由于自己并非JAVA方面的大牛.眼下也在边做边学,所以决定先将自己不懂的拿出来学并记下来. Timer是Java自带的 ...
- hdu5418--Victor and World(floyd+状压dp)
题目链接:点击打开链接 题目大意:有n个城市.在n个城市之间有m条双向路.每条路有一个距离.如今问从1号城市去游览其他的2到n号城市最后回到1号城市的最短路径(保证1能够直接或间接到达2到n).(n& ...
- 初识homebrew
homebrew是MAC上的一个包管理工具,用于软件安装,非常方便. homebrew安装: 命令行执行: ruby -e "$(curl -fsSL https://raw.githubu ...
- ASP.NET Core WebApi 返回统一格式参数（Json 中 Null 替换为空字符串）
相关博文:ASP.NET Core WebApi 返回统一格式参数 业务场景: 统一返回格式参数中,如果包含 Null 值,调用方会不太好处理,需要替换为空字符串,示例: { "respon ...
- Effective Java 第三版——6. 避免创建不必要的对象
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- ABP入门系列（6）——定义导航菜单
ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...
- TextMesh Pro Emoji Align With Text(表情和文字对齐)
前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...