Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IFRAMEs and the Safari on the iPad, how can the user scroll the content?

According to the Apple iOS mantra it should be possible to scroll the contents of an IFRAME by dragging it with two fingers. Unfortunately running the latest version of iOS on the iPad I have yet to find a single website with an IFRAME that scrolls using this method - no scrollbars appear either.

Does anyone know how a user is supposed to scroll the contents of an IFRAME with the mobile Safari?

like image 230
Karlth Avatar asked Jan 04 '11 22:01

Karlth


People also ask

How do I scroll in frame on IPAD?

Scroll a webpage: Drag up, down, or sideways. Scroll within a frame: Drag two fingers inside the frame.

How do I scroll in Safari on IPAD?

Use a two finger press inside the window that you're trying to scroll and move them up or down simultaneously. Or pinch your thumb and forefinger together and move it up or down.

How do I scroll with an iframe?

To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.

Do iframes work on Safari?

If the iframe content is fully responsive and can resize itself without internal scroll bars, then iOS Safari will resize the iframe without any real issues. Then this works without issues in iOS 7.1 Safari. You can change between landscape and portrait without any issues.


2 Answers

iOS 5 added the following style that can be added to the parent div so that scrolling works.

-webkit-overflow-scrolling:touch

like image 184
Karlth Avatar answered Sep 25 '22 15:09

Karlth


-webkit-overflow-scrolling:touch as mentioned in the answer is infact the possible solution.

<div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">      <iframe src="YOUR_PAGE_URL" width="600" height="400"></iframe> </div> 

But if you are unable to scroll up and down inside the iframe as shown in image below, enter image description here

you could try scrolling with 2 fingers diagonally like this,

enter image description here

This actually worked in my case, so just sharing it if you haven't still found a solution for this.

like image 27
Dipin Krishnan Avatar answered Sep 25 '22 15:09

Dipin Krishnan