移动端初级动画demo，纯js全屏滚动/整屏翻页，touch事件实例

知识点总结

移动端触摸事件：

1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。（滑动时触发频率非常高，可以在事件中打印console看看）
3. touchend事件：当手指从屏幕上离开的时候触发。

window.scrollTo：

滚动到指定位置,用法：window.scrollTo({top,left,behavior})
3个参数
top 等同于 y-coord，
left 等同于 x-coord，
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

html代码

<div id="wrap">
    <div id="main">
      <div class="page page1"></div>
      <div class="page page2"></div>
      <div class="page page3"></div>
      <div class="page page4"></div>
    </div>
  </div>

css代码

#wrap {
  height: 100%;
  overflow: scroll;
}
#main {
  height: 100%;
}
.page {
  height: 100%;
}
.page1 {
  background: #e4e6ce;
}
.page2 {
  background: #6ce26c;
}
.page3 {
  background: #bf4938;
}
.page4 {
  background: #2932e1;
}

javascript 代码

    document.addEventListener('touchstart', handleStart, false);
    document.addEventListener('touchmove', handleMove, false);
    document.addEventListener('touchend', handleEnd, false);
    let startY; //存储初始位置的Y值
    let diff;
    let page = 0;
    let hei = document.querySelector('.page').offsetHeight;
    // hei,是一屏的高度
    function handleStart(e) {
      startY = e.touches[0].pageY;
    }
    function handleMove(e) {
      if (!startY) {
        startY = e.touches[0].pageY;
      }
      diff = e.touches[0].pageY - startY;
      // 用当前的pageY - 初始pageY，小于0说明是手指向上滑动，页面下翻，相反则页面上翻
    }
    function handleEnd(e) {
      if (diff < 0) {
        // 下滑
        if (page >= 0 && page < 3) {
          page++;
        }
      } else {
        //上滑
        if (page > 0 && page <= 3) {
          page--;
        }
      }
      //滚动到最后一页时，top值应该是3个page的高度,第一页时，应该是0个page的高度
      //我这里是4页，所以判断用0-3，，具体页数可以自行修改
      let top = hei * page;
      document.querySelector('#wrap').scrollTo({ top, behavior: 'smooth' });

请认真看注释和知识点，有什么问题或建议，欢迎留言 ^ V ^

最后

以上就是坚强雨为你收集整理的移动端初级动画demo，纯js全屏滚动/整屏翻页，touch事件实例的全部内容，希望文章能够帮你解决移动端初级动画demo，纯js全屏滚动/整屏翻页，touch事件实例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。