0

I created a HTML page with several text paragraphs in it. I wanted it to automatically scroll bottom after opening the page. So I used following Javascript and it working fine. let say it is page.html

But then I needed it to display inside an iframe. Let say main page as index.html, index.html has iframe tag: <iframe src="./page.html"></iframe>

It also worked while loading inside the iframe within major browsers (chrome, firefox, IE, Opera) but not in Apple's Safari mobile browser.

I tested direct HTML page page.html with Safari mobile browser and it worked!

But after loaded same page inside an iframe in index.html it didn't work.

This is the Javascript I have used in page.html

<script language="javascript">
function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); }
setInterval(autoScrolling, 1000); 
</script>

Please suggest me a code fix for Apple's Safari mobile browser

Udaya Arunakantha
  • 55
  • 1
  • 9
  • Consider loading the contents in iframe into the DIV instead. Your approach may lead to double scrolling. Also, iframe is NOT mobile friendly; avoid using it. – Raptor Jan 22 '19 at 06:28
  • Possible duplicate of [How to auto-scroll to end of div when data is added?](https://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added) – Googlian Jan 22 '19 at 12:45

2 Answers2

0

You need to use -webkit-overflow-scrolling: touch, example:

<div style="overflow: scroll !important; -webkit-overflow-scrolling: touch !important;">
     <iframe ...> ... </iframe>
</div>
Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64
  • I used it but it only does allowing scrolling on Safari mobile, problem is, after page opened, iframe src content should be automatically scrolled down into bottom. – Udaya Arunakantha Jan 22 '19 at 06:30
  • @UdayaArunakantha try this `JS` code instead, `var myIframe = document.getElementById('iframe'); myIframe.onload = function () {myIframe.contentWindow.scrollTo(xcoord,ycoord);}` – Mehdi Dehghani Jan 22 '19 at 06:37
  • I tried it, but not working in safari, here is the link: https://www.onlanka.com/mychat/temp/ – Udaya Arunakantha Jan 22 '19 at 06:43
  • I have no access to apple device, so I can not test the demo. try using `px` values instead of `%`. or try to scroll the iframe just a bit, e.g: 100px – Mehdi Dehghani Jan 22 '19 at 07:16
0

you have to use -webkit-overflow-srolling: touch on the parent of the iframe, and set a height for your iframe.

<style>
.parent-iframe {
   -webkit-overflow-srolling: touch;
   overflow-y: auto;
}
iframe {
  height: 100vh
}
</style>
<div class="parent-iframe">
 <iframe src="http://someurl.com ...>
</div>

Also if you have some position: fixed elements in your iframe they will not be fixed on ios safari. You can try this solution to avoid that:
https://github.com/PierBover/ios-iframe-fix

ggirodda
  • 770
  • 7
  • 19