Jquery scrollLeft not working on Android

Question

The code below does not work in the Android browser!

How to fix it?

<input id="sannn" type="button" value="SAN" /> <div id="sann" style="width:640px; height:200px; overflow:scroll; border:solid 1px red;"> <div style="border:solid 1px green; width:3000px; height:200px;">4545</div> </div> $('#sannn').bind('click', function () { $('#sann').scrollLeft(10); }); 

Answer 1

This seems to be a bug in Android browsers 4.0.3 +

http://code.google.com/p/android/issues/detail?id=38505&thanks=38505&ts=1350315570

Problem 38505: The scrollLeft element of the DOM element does not work in Android Browser 4.0.3 +

Place the wrapper div as relative with hidden overflow and a certain width and height. Use the absolute position on the inner div (the div you want to move) and play with the left row in the left position through jQuery.

If you really need scrollbars. JQuery UI sliders can help: http://jqueryui.com/slider/

Answer 2

I came across the same issue with Zepto.js. I managed to get around this problem by first disabling overflow: scroll the scroll element, for example:

 $("#element-to-scroll").css({'overflow': 'hidden'}).scrollLeftTo(newXPos, 250).css({'overflow': 'scroll');