Analyse des méthodes de mise en œuvre du défilement et de l'accélération inertielle dans le développement de téléphones mobiles JS HTML5

L'exemple de cet article décrit la méthode d'implémentation du défilement et de l'accélération inertielle dans le développement de téléphones mobiles JS HTML5. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Voici trois méthodes d'implémentation du défilement :

1) Utilisez le débordement d'attribut CSS natif : scroll p id=. parent style = overflow: scroll; pid='content' content area/p /p Remarque : il y a un bug dans Android, il reviendra à la zone de contenu supérieure. La solution consiste à utiliser les deux dernières méthodes pour y parvenir.

2) Idée d'implémentation de la programmation js : comparez les changements de position avant et après le déplacement du doigt sur l'écran, modifiez le contenu de l'élément de contenu

1 Défilement

Les éléments suivants sont. trois méthodes d'implémentation :

1) Utiliser natif Le débordement de l'attribut css : scroll

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

Remarque :

a un bug sous android, il remontera en haut après le scroll Pour la zone de contenu, la solution est d'utiliser les deux dernières méthodes pour implémenter

2) programmation js

Idée : comparer les la position change avant et après que le doigt se déplace sur l'écran pour changer la position de l'élément de contenu

Étape 1 : définissez le débordement du parent sur caché, définissez la position du contenu sur relative et définissez top sur 0 ;

Étape 2 : Écoutez les événements tactiles

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

Étape 3 : Implémenter le code tournant

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

Étape 4 : Optimiser

Le code ci-dessus est dans L'effet d'exécution sur le téléphone mobile est beaucoup plus lent que celui sur le PC

Pour la partie optimisation, veuillez consulter :

3) Utilisez le framework iScroll4

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

Site officiel du framework : http://www.php.cn/

2. Assouplissement inertiel

Idée : Prendre la vitesse moyenne v du doigt glissant sur l'écran au cours de la dernière période de temps, Laisser v changer selon une fonction décroissante jusqu'à ce que v<=0

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById('parent');
var content = document.getElementById('content')
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置
/**
 * 用于缓动的变量
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; // 是否停止缓动
parent.addEventListener('touchstart', function(e) {
  lastY = startY = e.touches[0].pageY;
  /**
   * 缓动代码
   */
  lastMoveStart = lastY;
  lastMoveTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
});
parent.addEventListener('touchmove', function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
  if(nowTime - lastMoveTime > 300) {
    lastMoveTime = nowTime;
    lastMoveStart = nowY;
  }
});
parent.addEventListener('touchend', function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  var contentY = (parseInt(contentTop) + moveY);
  // 设置top值移动content
  content.style.top = contentY + 'px';
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
  stopInertiaMove = false;
  (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1; //加速度方向
    var deceleration = dir*0.0006;
    var duration = v / deceleration; // 速度消减至0所需时间
    var dist = v * duration / 2; //最终移动多少
    function inertiaMove() {
      if(stopInertiaMove) return;
      var nowTime = e.timeStamp || Date.now();
      var t = nowTime-startTime;
      var nowV = v + t*deceleration;
      // 速度方向变化表示速度达到0了
      if(dir*nowV < 0) {
        return;
      }
      var moveY = (v + nowV)/2 * t;
      content.style.top = (contentY + moveY) + "px";
      setTimeout(inertiaMove, 10);
    }
    inertiaMove();
  })(v, nowTime, contentY);
});

J'espère que cet article sera utile à tous ceux qui ont aidé dans la programmation jQuery.

Pour plus d'articles connexes sur l'analyse des méthodes de mise en œuvre du défilement et de l'assouplissement inertiel dans le développement de téléphones mobiles JS HTML5, veuillez faire attention au site Web PHP chinois !