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.

maybe this will help you stackoverflow.com/questions/17722497/… — lordkain
– lordkain, Commented Jul 24, 2014 at 11:36
One thing I noticed is on line 17, you are calling a function "getscrollTop(node)" that you already have as a variable scrollTop. Also, you declare "oscrollTop" as a variable and then directly assign it to an object at the very end of your function...just directly assign it to the object. If you're worried about performance on low end devices, code optimization is extremely important. — Michael
– Michael, Commented Jul 24, 2014 at 11:37
@lordkain What could be the best solution out of them. First solution seems to be doing big calculations in code. — Exception
– Exception, Commented Jul 24, 2014 at 11:46

Oliver Watkins · Accepted Answer · 2014-07-24 13:42:23Z

5

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.

answered Jul 24, 2014 at 13:42

Oliver Watkins

13.4k40 gold badges135 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Exception Over a year ago

Thanks for the suggestion. But I just removed scroll handler and used setInterval with 20 seconds to synchronise scroll positions of both the DIVs and it is pretty smooth now. Edit : And also I added your suggestion :) May I know more about what is the reason behind rounding integers?

Oliver Watkins Over a year ago

I think it has something to do with internal rounding of the scroll component. I am not sure myself. Also if you reduce the events (like you did) that is a way of not overwhelming the component.

Lakmal Caldera · Accepted Answer · 2014-08-28 12:21:01Z

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.

Your solution fails if both elements have different scroll heights
Hi @redV, I believe the scroll height value is taken relative to its scroll and as this value is passed to the other scroll it makes it look like the the value is in fact taken from the other scroll, so regardless of height, each scroll will scroll the same height based on that value it is passed.. thus it will still synchronise the two scrolls.
Yes, you are right. I think no need to calculate percentage :)

Collectives™ on Stack Overflow

synchronising two divs scroll is not smooth in iOS

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related