Skip to content

note some js code in mobile

scroll smooth

code

js
// scrollSmooth.js
module.exports = function (elem) {
  var startY, endY, startTime, endTime
  var speedDecay = 0.02 //速度衰减量
  var lastMoveTime, secondLastMoveTime //最后次手指停止移动的时间和倒数第二次手指停止移动的时间(测试的时发现有时候最后一次移动时间不准确,故而选用倒数第二次停止移动的时间)
  var stopMoveInterval //手指停止滑动的时间

  var stopInertiaMove = false //停止惯性滚动的标识位

  var oldPageY = null
  var oldScrollTop = null
  elem.addEventListener('touchstart', function (e) {
    oldScrollTop = elem.scrollTop
    stopInertiaMove = true //当惯性滑动过程中再次触碰到屏幕的时候应该立即停止惯性滑动
    startY = e.touches[0].pageY
    startTime = Date.now()
  })

  elem.addEventListener('touchmove', function (e) {
    //这个事件主要用来记录最后一次停止滑动的时间,当停止滑动时间超过一定量就不执行惯性滑动
    secondLastMoveTime = lastMoveTime
    if (oldPageY) {
      //正常速度滚动
      let top = oldScrollTop + (oldPageY - e.touches[0].pageY)
      elem.scrollTop = top
    }
    if (!oldPageY) oldPageY = e.touches[0].pageY

    lastMoveTime = Date.now()
  })

  elem.addEventListener('touchend', function (e) {
    oldPageY = null
    endY = e.changedTouches[0].pageY
    endTime = Date.now()
    if (secondLastMoveTime) {
      stopMoveInterval = endTime - secondLastMoveTime
    } else {
      stopMoveInterval = endTime - lastMoveTime
    }

    //计算速度,距离除以时间
    var speed = (endY - startY) / (endTime - startTime)
    var speedAbs = Math.abs(speed)

    /**
     * 惯性移动的递归方法
     */
    function inertiaMove() {
      if (speedAbs < 0 || stopInertiaMove) {
        //如果速度绝对值小于0了,则结束惯性滚动
        return
      }

      //设置每次惯性滑动时间为20毫秒
      var distance = speedAbs * 20

      if (speed < 0) {
        //如果速度是负数,则是手指向上滑动。继续惯性滚动,则scrollTop的值会增加
        elem.scrollTop += distance
        //console.log('向上惯性滚动' + distance);
      } else {
        //如果速度是正数,则是手指向下滑动。继续惯性滚动,则scrollTop的值会减少
        elem.scrollTop -= distance
        //console.log('向下惯性滚动' + distance);
      }

      //速度衰减
      speedAbs -= speedDecay

      setTimeout(inertiaMove, 10)
    }

    if (stopMoveInterval < 100) {
      //手指停止滑动超过0.1秒的就不执行惯性滑动了
      stopInertiaMove = false
      inertiaMove()
    }
  })
}

usage

import MyScroll from './util/scrollSmooth'
let ele = document.getElelmetById('xxx')
MyScroll(ele)
~~~

## ban wechat and browser body default scroll pull
### code
~~~
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
});