problem with scrolling to element using jQuery and scrollTo plugin on mobile (Android)
I am trying to write some jQuery code that shou开发者_如何学Pythonld run on mobile browser, and I have ran into a problem with scrolling the viewport to an element. I have an element that is not visible, and I want to scroll (both X and Y) so that it'd become visible.
I have tried using the excellent scrollTo jquery plugin (http://flesler.blogspot.com/2007/10/jqueryscrollto.html), and while it works wonderfully on all desktop browser I tried (FF,IE6+,Chrome) it failed for me on my Android browser (native for Android 2). It seems to scroll, but not to the correct position.
I have setup a demo page using jsfiddle here (result link)- http://jsfiddle.net/8cfqM/3/embedded/result/
In this very simple demo I have setup two absolutely positioned divs, one way off to the bottom right of the page (making the document very very big), and the second down and right, but not so much. I then try to scrollTo the second div.
This works fine on my desktop browser, but fails on my mobile, it just doesn't scroll to the correct element position. the same thing happens to me when the elements are not absolutely positioned, btw.
I have also tried using $('html, body').scrollTop/Left (With and without animate), and got basically the same results. same when I did some capabilities "sniffing" to find if 'html' or 'body' is the correct element to use (As described here - http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html). All gave the same end result more or the same.
I am guessing that the problem lies in that all these methods don't scroll the correct element, and that it has to do with the difference between visual and layout viewports in mobile browsers, which I have heard about but probably don't understand well enough yet to solve this (proof lies in that I haven't...).
Help anyone?
Thanks!
精彩评论