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.
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.
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%").
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With