I'm encountering some difficulties with the .animate() function in Javascript. I'm using it to automatically scroll to an element within a div, which is functioning correctly. However, I am facing an issue where the scrolling freezes for a second after a few milliseconds, then continues from the point it should have animated to already before proceeding smoothly.
The scrollable div contains around 36 divs with a width of 75 px, and there's a dynamically generated SVG graph in the background. To animate the div, I am utilizing:
parent.stop(true, false).animate({
scrollLeft: offsetToLeft
}, 50*Math.abs(elementsToSkipp), function (element, index) {
//Show highlight the element and refresh data
return false;
}.bind(this, forecastElement[0], index));
The use of return false; and .stop(true, false) was suggested on Stackoverflow, but it hasn't completely resolved my problem. Any assistance would be greatly appreciated.
EDIT: The lag only occurs on mobile devices (iOS, Android); there are no such issues on a Desktop PC.
Thanks, David