HTML5手机开发-滚动和惯性缓动的代码实例

百变鹏仔 2个月前 (10-18) #H5教程

文章标签惯性

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

<div id="parent" style="overflow:scroll;>    <div id=&#39;content&#39;>内容区域</div></div>

Notice:

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

立即学习“前端免费学习笔记（深入）”；

2)js 编程实现

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

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

第二步：监听touch事件

var parent = document.getElementById(&#39;parent&#39;);parent.addEventListener(&#39;touchstart&#39;, function(e) {    // do touchstart});parent.addEventListener(&#39;touchmove&#39;, function(e) {    // do touchmove});parent.addEventListener(&#39;touchend&#39;, function(e) {    // do touchend});

第三步：实现滚动代码

/** * 这里只实现垂直滚动 */var parent = document.getElementById(&#39;parent&#39;);var content = document.getElementById(&#39;content&#39;)var startY = 0; // 初始位置var lastY = 0; // 上一次位置parent.addEventListener(&#39;touchstart&#39;, function(e) {    lastY = startY = e.touches[0].pageY;});parent.addEventListener(&#39;touchmove&#39;, function(e) {    var nowY = e.touches[0].pageY;    var moveY = nowY - lastY;    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);    // 设置top值移动content    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;    lastY = nowY;});parent.addEventListener(&#39;touchend&#39;, function(e) {    // do touchend    var nowY = e.touches[0].pageY;    var moveY = nowY - lastY;    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);    // 设置top值移动content    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;    lastY = nowY;});

第四步：优化

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

优化部分请参见:

3) 使用iScroll4框架

　var scroll = new iScroll(&#39;parent&#39;, {hScrollbar: false,vScrollbar: true,checkDOMChanges : true});

2.惯性缓动

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

文章推荐

HTML5手机开发-滚动和惯性缓动的代码实例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集