Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scrolling iframe on mobile app jump to top of the page at some point

I have this html:

<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
     <h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;">
    <iframe style="height: 100%; width: 100%;" src="url"></iframe>
</div>

The iframe is scrolling down/top and right/left but when I scroll at some point it jumps to the top of the page.

like image 377
ben ezra Avatar asked Dec 17 '13 09:12

ben ezra


People also ask

How do I get scroll position in iframe?

TO get the scroll position use the attributes scrollX and scrollY that exists in the window object. Returns null or undefined for cross domain iframes.

How do I stop iframe scrolling?

1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%").

Why does my iframe have scroll bars?

In a web browser, if the content of an IFRAME is longer or wider than the space afforded to it by the parent page, the window will automatically display scroll bars. While this behavior is sometimes desirable, in most cases it should be avoided.


1 Answers

Reference an object instead of an iframe

<object type="text/html" data="content-to-scroll.html"></object>

What mobile device are you using?

<header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a>
 <h1 class="title">Page</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%;   padding-top: 42px;">
<object type="text/html" style="height: 100%; width: 100%;" data="url"></object>
</div>

This has been known to work. But not always.

like image 53
DcHerrera Avatar answered Sep 30 '22 19:09

DcHerrera