Exemples de code de développement mobile HTML5 pour le défilement et l'accélération inertielle

1. Faites défiler Voici trois méthodes d'implémentation : 1) Utilisez le CSS natifattribut overflow: scroll p id= parent style = overflow:scroll; pid='content' content area/p /p Remarque : Il y a un bug dans android, il sera annulé après défilement Pour atteindre la zone de contenu supérieure, la solution est d'utiliser les deux dernières méthodes pour obtenir 2) des idées d'implémentation de programmation js : comparer les changements de position avant et après le déplacement du doigt sur l'écran pour modifier le contenu de l'élément de contenu

　1. Scroll

Voici trois méthodes d'implémentation :

1) Utilisez le débordement d'attribut CSS natif : scroll

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

Remarque :

Il y a un bug dans Android. Après le défilement, il reviendra à la zone de contenu supérieure. La solution est d'utiliser les deux dernières méthodes pour implémenter

　2) la programmation js pour implémenter

Idée : comparez les changements de position avant et après le déplacement du doigt sur l'écran pour modifier le contenu de l'élément de contenu La position

La première étape : définissez le débordement du parent sur caché, définissez la position du contenu sur relative et haut sur 0 ;

Deuxième étape : écoutez l'événement tactile

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émentez 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 : optimisez

Ce qui précède le code fonctionne bien mieux sur un téléphone mobile que sur un PC

Partie optimisation Veuillez consulter :

　3) Utiliser le framework iScroll4

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

　2. Assouplissement inertiel

Idée : prendre la dernière période de temps pendant laquelle le doigt glisse sur l'écran La vitesse moyenne v, laissez v changer selon une fonction décroissante jusqu'à ce qu'elle ne puisse plus bouger ou 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);
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!