本文摘自PHP中文网,作者黄舟,侵删。
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
1 2 3 |
|
Notice:
在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现
2)js 编程实现
思路:对比手指在屏幕上移动前后位置变化改变内容元素content的位置
第一步:设置parent的 overflow为hidden, 设置content的position为relative, top为0;
第二步:监听touch事件
1 2 3 4 5 6 7 8 9 10 11 |
|
第三步:实现滚动代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
第四步:优化
上边代码在手机上运行效果相对PC上要卡很多
优化部分请参见:
3) 使用iScroll4框架
1 2 3 4 5 |
|
2.惯性缓动
思路:取手指最后一段时间在屏幕上划动的平均速度v,让v按一个递减函数变化,直到不能移动或v<=0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
|
以上就是HTML5手机开发-滚动和惯性缓动的代码实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
h5离线缓存是什么?h5 manifest离线缓存的应用(附代码)
详解HTML5 geolocation获取地理位置信息的示例代码分享
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者