sincronizzazione di due div di scorrimento non è corretta in iOS

Question

-> Si prega di goto Modifica parte di questa domanda

voglio sincronizzare barra di scorrimento di due div e questo è come sto facendo

var div1 = document.getElementById('element1'), 
    div2 = document.getElementById('element2'); 

div1.addEventListener('touchmove', scrolled, false); 
div2.addEventListener('touchmove', scrolled, false); 

function getscrollTop(node) { 
    return node.pageYOffset || node.scrollTop; 
} 

function scrolled() { 

    var node = this, scrollTop = getscrollTop(node); 

    var percentage = scrollTop/(node.scrollHeight - node.clientHeight); 

    var other = document.getElementById({ 
     "element1": "element2", 
     "element2": "element1" 
    }[node.id]); 

    other.scrollTop = percentage * (other.scrollHeight - other.clientHeight); 

}; 

Fiddle -> utilizzato scroll invece touchmove

Ma il problema è che è tremolante nei dispositivi di fascia bassa e vorrebbe renderlo liscio in dispositivi di fascia bassa di evento.

Modifica

Ho usato qui di seguito il codice per lisciare lo scorrimento

var children = document.querySelectorAll('.scrolldiv'); 

var getscrollTop = function(node) { 
    return node.pageYOffset || node.scrollTop; 
}, toInt = function(n) { 
    return Math.round(Number(n)); 
}; 

window.setInterval(function() { 
    var scrollTop = getscrollTop(children[0]); 
    var percentage = scrollTop/(children[0].scrollHeight - children[0].clientHeight); 
    var oscrollTop = percentage * (children[1].scrollHeight - children[1].clientHeight); 
    // console.log(1); 
    children[1].scrollTop = toInt(oscrollTop); 
}, 2); 

E 'agevole nei browser desktop, ma in del browser iOS, quando si imposta la seconda div di scorrimento è masturbandosi, strappi nella impostazione dei sensi scrollTop una volta completato lo scorrimento, non durante lo scorrimento.

Answer 1

Non vedo perché si debba calcolare una nuova percentuale qui, valore che si consegna al secondo scroll .. questo è probabilmente il motivo del jerking .. invece si potrebbe semplicemente prendere il valore di scroll dal primo scorrere e assegnarlo direttamente all'altro scorrimento .. Questo rimuoverà il movimento a scatti nell'altro scorrimento .. e sincronizzandoli ..

Ho appena aggiunto la seguente riga alla fine della tua funzione a scorrimento .. altro .scrollTop = getscrollTop (nodo);

La funzione di modifica: -

funzione scorrimento() {

var node = this, 
    scrollTop = getscrollTop(node); 

var id = node.id; 

var percentage = getscrollTop(node)/(node.scrollHeight - node.clientHeight); 

var other = document.getElementById({ 
    "element1": "element2", 
    "element2": "element1" 
}[id]); 

var oscrollTop = percentage * (other.scrollHeight - other.clientHeight) 

//other.scrollTop = oscrollTop; 
//Please note that I have commented out the above line.. and added the following line 
other.scrollTop = getscrollTop(node); 

};

Spero che questo sia il comportamento che speravi, l'ho testato su jsfiddle, entrambi gli scroll sono ben sincronizzati.

Answer 2

Se si arrotonda i numeri a valore di scorrimento per interi allora questo problema scompare:

http://jsfiddle.net/2Cj4S/15/

ho appena usato una funzione di arrotondamento:

function toInt(n){ return Math.round(Number(n)); }; 

e questo sembra aver riparato. I doppi valori hanno davvero confuso i widget della GUI come le barre di scorrimento e il disegno 2D.