JS+HTML5手机开发之滚动和惯性缓动实现方法分析

1. 滚动 以下是三种实现方式：

1) 利用原生的css属性 overflow: scroll p id= parent style = overflow:scroll; pid='content'内容区域/p /p Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现

2)js 编程实现 思路：对比手指在屏幕上移动前后位置变化改变内容元素content

1. 滚动

以下是三种实现方式：

1) 利用原生的css属性 overflow: scroll

<p id="parent" style="overflow:scroll;>
  <p id='content'>内容区域</p>
</p>

Notice:

在android 有bug, 滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现

2)js 编程实现

思路：对比手指在屏幕上移动前后位置变化改变内容元素content的位置

第一步：设置parent的 overflow为hidden, 设置content的position为relative, top为0;

第二步：监听touch事件

第三步：实现滚动代码

第四步：优化

上边代码在手机上运行效果相对PC上要卡很多

优化部分请参见:

3) 使用iScroll4框架

框架官网：http://www.gxlcms.com/

2.惯性缓动

思路：取手指最后一段时间在屏幕上划动的平均速度v，让v按一个递减函数变化，直到不能移动或v<=0

希望本文所述对大家jQuery程序设计有所帮助。

更多JS+HTML5手机开发之滚动和惯性缓动实现方法分析相关文章请关注PHP中文网！