jquery scrollLeft not working on Android

问题

The code below is not working in Android browser!

How do I 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);
});

回答1:

Looks like it is a bug in Android Browsers 4.0.3+

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

Issue 38505: DOM element scrollLeft setter doesn't work in Android Browser 4.0.3+

Position the div wrapper as relative with overflow hidden and a specific width and height. Use position absolute on the inner div (the div you want to move) and play with the inline style left position via jQuery.

If you really need scrollbars. The Jquery UI sliders might help: http://jqueryui.com/slider/

回答2:

I ran into the same issue with Zepto.js. I was able to work around this issue by first disabling the overflow: scroll on the scrolling element, like so:

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

来源：https://stackoverflow.com/questions/12641898/jquery-scrollleft-not-working-on-android