Beispiele für HTML5-Mobilentwicklungscode für Scrollen und Trägheitsbeschleunigung

1. Scrollen Es folgen drei Implementierungsmethoden: 1) Verwenden Sie natives CSSAttribut overflow: scroll p id= parent style = overflow:scroll; pid='content' content area/p /p Hinweis: Es gibt einen Fehler in Android, es wird danach zurückgesetzt Scrollen Um den oberen Inhaltsbereich zu erreichen, besteht die Lösung darin, die beiden letztgenannten Methoden zu verwenden, um 2) Ideen zur Implementierung der js-Programmierung zu erreichen: Vergleichen Sie die Positionsänderungen vor und nach der Fingerbewegung auf dem Bildschirm, um den Inhalt des Inhaltselements zu ändern

　1. Scrollen

Es folgen drei Implementierungsmethoden:

1) Verwenden Sie den nativen CSS-Attributüberlauf: scroll

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

Hinweis:

Es gibt einen Fehler in Android. Nach dem Scrollen wird es zum oberen Inhaltsbereich zurückkehren. Die Lösung besteht darin, die letzten beiden Methoden zu verwenden, um

　2) js-Programmierung zu implementieren. Vergleichen Sie die Positionsänderungen vor und nach der Bewegung des Fingers auf dem Bildschirm, um den Inhalt des Inhaltselements zu ändern. Die Position von

Der erste Schritt: Setzen Sie den Überlauf des übergeordneten Elements auf ausgeblendet, setzen Sie die Position des Inhalts auf relativ und oben auf 0 ;

Schritt zwei: Auf Berührungsereignisse achten

Schritt 3: Rolling Code implementieren

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
});

Schritt 4: Optimieren

/**
 * 这里只实现垂直滚动
 */
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;
});

Das Obige Code läuft viel besser auf einem Mobiltelefon als auf einem PC

Optimierungsteil Bitte beachten Sie:

　3) Verwenden Sie das iScroll4-Framework

　2. Trägheitseasing

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

Idee: Nehmen Sie die letzte Zeitspanne, in der der Finger über den Bildschirm wischt. Die Durchschnittsgeschwindigkeit v, lassen Sie v entsprechend einer abnehmenden

Funktion

ändern, bis es sich nicht mehr bewegen kann oder v<=0

Das obige ist der detaillierte Inhalt vonBeispiele für HTML5-Mobilentwicklungscode für Scrollen und Trägheitsbeschleunigung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!