CODEWITHSUNDEEP
androidjqueryscrolloverflow
SAN
SAN

Reputation: 49

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

Upvotes: 3

Views: 3037

Answers (2)

Joseph Jaramillo
Joseph Jaramillo

Reputation: 401

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

Upvotes: 0

DDA
DDA

Reputation: 989

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/

Upvotes: 3

Related Questions