1

I can't make the following work on Android 3.1/Honeycomb (only Android version tested), but it works everywhere else - including on other WebKit-based browsers, e.g. on iPhone.

A DIV with fixed dimensions:

<DIV id="TestDiv" style="width:300px;height:200px;overflow:auto;">Lorem ipsum dolor sit amet, etc.</DIV>

A line of JavaScript or jQuery to scroll it down after page has loaded:

document.getElementById("TestDiv").scrollTop = 100;
$("#TestDiv").scrollTop(100);

I also tried wrapping the above in a setTimeout to introduce a small delay from the loading of the page. It is sometimes needed with webkit, but it did not help here.

I have seen programmatic DIV scrolling work on my Android 3.1. device so I know it can be done. The question is how?

EDIT: Please notice, I am looking for a web solution that also works in the stock browser of Android, not a native Android solution.

W3Coder
  • 620
  • 8
  • 20
  • are you just trying to move the DIV to the top of the viewport window? Or are you trying to mimic page scrolling? – tkone Jan 31 '12 at 01:40
  • I am trying to make the text scroll **inside** the DIV - it is for a chat application. – W3Coder Jan 31 '12 at 07:24

5 Answers5

2

This is a known problem with the stock Android browser:

http://code.google.com/p/android/issues/detail?id=19625

The best solution is probably to wait until it is fixed by Google, rather than trying to figure out a hack.

zennehoy
  • 6,405
  • 28
  • 55
  • OK, thanks. Would like a (nice) hack, though. If nobody posts a work-around within the next couple of days, the bounty goes to you. – W3Coder Jan 26 '12 at 07:34
  • Sorry, I don't seem to be able to attribute the bounty manually anymore. I accepted your answer, maybe you will get the points automatically. – W3Coder Feb 01 '12 at 09:53
1

A workaound that worked for me: first, temporarily set the overflow property to 'hidden', then set the scrollTop property, then set the overflow property back to 'scroll' (or auto). The scrollTop value seems to be kept intact and honored when the overflow property is set back to 'scroll'. This was a pretty trivial workaround that worked on all browsers I tested on (desktop and mobile). I didn't test it exhaustively, and I didn't test with transitions in place, so there may be side-effects that I haven't encountered... Your mileage may vary - but it's an easy thing to try. see: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

Community
  • 1
  • 1
Allan Nienhuis
  • 3,961
  • 2
  • 23
  • 19
1

You can done with normal javascript method. Please kindly check with this

window.scroll(0,650)

0 - X Axis 650 - Y Axis

Akilan
  • 1,707
  • 1
  • 16
  • 30
0

what I think of is that you can override onPageFinished(WebView view, String url) and inside it you can do this view.scrollTo(x, y);

a fair player
  • 11,530
  • 9
  • 46
  • 48
0

I had a similar issue. In the end I just placed each of my pages on top of each other using position absolute with a zindex then toggled their visibility. Sucks that bugs like this exist.

backdesk
  • 1,781
  • 3
  • 22
  • 42