How can I workaround window.scroll not working in iFrame on Android

Question

window.scroll and window.scrollTo (its alias) don't seem to work on an <iframe> embedded in the Android 4.0.4 internet browser. Nor do any of the other functions (it seems) like window.scrollBy, etc. How can I work around this limitation and force the <iframe> to scroll to a specific position on the page?

Some extra information:

Solution doesn't need to be elegant, it can be a hacky work around. This is test code anyway.
While the code doesn't need to be clean, it should be at least possible to make it cross-browser friendly
Device is a Samsung Galaxy Note running Android 4.0.4 native browser
Frame is in the same domain, so code can be run on it
Other than the scrolling, I want to leave the page as untouched as possible
The <iframe> has finished loading by the time my code runs

element.scrollIntoView() should still work. oh, and it's document.documentElement.scrollTop, document.body.scrollTop, not window.scroll — dandavis, Jul 30 '13 at 18:36
Are you running the code from inside the iframe or from the parent page? — AndrewK, Jul 30 '13 at 18:38
@dandavis `.scrollIntoView()` doesn't seem to work either. Also, `window.scroll` is a different function than setting `scrollTop` (which varies a bit between browsers) — LoveAndCoding, Jul 30 '13 at 18:42
@AndrewK Neither seems to work, but I will be running it from the parent page. — LoveAndCoding, Jul 30 '13 at 18:42
What element are you trying to scroll? The WebKit core doesn't like scrolling the `` (sometimes). — Pointy, Jul 30 '13 at 18:46
@Pointy I'm using `window.scroll` so the `window`/`body`/`documentElement` (whichever is applicable for webkit, which I think is `documentElement`) — LoveAndCoding, Jul 30 '13 at 19:57
maybe u need to the detect the iframe to be loaded and then use scrollTo — Alex Garulli, Aug 07 '13 at 13:00
@AlexGarulli That is exactly what I'm doing and is exactly what is not working. That's what I'm trying to workaround. — LoveAndCoding, Aug 07 '13 at 15:08
maybe this ...would help http://blog.futtta.be/2010/03/03/5-tips-to-tackle-the-problem-with-iframes/ — Alex Garulli, Aug 07 '13 at 15:17

score 1 · Answer 1 · answered Aug 08 '13 at 01:17

Use focus()?

function scrollY(i) {
  var div = document.createElement("div");
  div.innerHTML = "<a style='position:absolute;left:0;top:" + i + "px' href='#'></a>";
  div = div.firstChild;
  document.body.appendChild(div);
  div.focus();
  div.parentNode.removeChild(div);
}

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

It looks like a known bug discussed here and here .

The following did a trick for me:

Switch off overflow style by adding {overflow:hidden}
Call scrollTo
Switch on style by setting {overflow:scroll}

edited May 23 '17 at 11:43

Community

1
1

answered Aug 08 '13 at 09:25

Andrey

455
4
14

Thank you for pointing me to the bug. I hadn't found that anywhere. I tried your suggestion, but it doesn't seem to work on the `window`, the `documentElement`, nor the `body`. :( If what you were trying on was the window, could you share your code? Thanks – LoveAndCoding Aug 08 '13 at 20:33
I used it on div. What if you try to use div inside the iFrame and scroll it using the trick that I mentioned. – Andrey Aug 08 '13 at 20:41
As I said in my question, I want to leave the page as unmodified as possible. Wrapping the page in a `
` to scroll it, especially only for this one browser, is not really a viable option for me unfortunately. This is testing code for the page, so scrolling should really be the only major modification as long as it can be helped.
– LoveAndCoding Aug 08 '13 at 23:31

How can I workaround window.scroll not working in iFrame on Android

2 Answers2