synchronising two divs scroll is not smooth in iOS

Question

--> Please goto Edit part of this Question

I want to synchronise scroll bar of two divs and this is how I am doing it

 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 -> used scroll instead touchmove

But the problem is it is flickering in low end devices and would like to make it smooth in event low end devices.

Edit

I have used below code to smoothen the scrolling

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

It is smoother in Desktop browsers but in iOS browser, when setting second DIv's scroll it is jerking, jerking in the sense setting scrollTop once scrolling is completed, not while scrolling.

Answer 1

If you round your scroll value numbers to integers then this problem goes away :

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

I just used a rounding function :

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

and this seems to have fixed it. Double values really confused GUI widgets like scrollbars, and 2D drawing.

Answer 2

I don't see why you have to calculate a new percentage here, value which you hand over to the second scroll.. that's probably the reason for the jerking.. instead you could simply take the scroll value from the first scroll and assign it directly to the other scroll.. This will remove the jerky-ness in the other scroll.. and synchronising them..

I just added the following line to the bottom of your scrolled function.. other.scrollTop = getscrollTop(node);

The modified function:-

function scrolled() {

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

};

I hope this the behaviour you were hoping for, i tested it out on jsfiddle, both scrolls are well synchronised.