scrolling in iframe does not work

Motooo

unread,

Jan 26, 2011, 2:29:51 AM1/26/11

to iScroll

hi, I noticed that scrolling in an iframe fails.
scrolling works on all my pages, but not in an iframe. (iPhone iOS
4.2.1)
<pre><code>
<div id="tools" class="s-pane">
<div class="toolbar">
<h1>Tools</h1>
</div>
<div id="ui-tools-wrapper" class="s-scrollwrapper">
<div id="ui-tools-pane" class="s-scrollpane">

<div>
<iframe src="example.html" frameborder="0"></
iframe>
</div>
</div>
</div>
</div>
</code>

ghenne

unread,

Mar 28, 2011, 2:10:33 PM3/28/11

to isc...@googlegroups.com, Motooo

+1

I have the same problem here. I need to display a web page within a scroller. Is there another way to do this?

Gaetan Lecomte

unread,

Jun 7, 2011, 8:39:17 AM6/7/11

to isc...@googlegroups.com, Motooo

Any news on this ?

Thanks

Jordi Tost

unread,

Jun 23, 2011, 6:22:55 AM6/23/11

to isc...@googlegroups.com

I have the same problem here.

I'm coding a video/image gallery with the snap option. As the videos inside are hosted on Vimeo and it inserts an iframe, I lose the scroll interaction when I have a video.

I also lose the interaction with the video, and I cannot play/pause, etc.

longodancer

unread,

Jul 15, 2011, 4:41:42 AM7/15/11

to isc...@googlegroups.com

I have exactly the same problem!

No scrolling inside the iframe.
Is there a chance to get the problem fixed?

It would be really great, because our comlete app is based on the use of iframes.

편방현

unread,

Jul 18, 2011, 6:44:15 AM7/18/11

to isc...@googlegroups.com

use.. Jquery~

function init() {

$('#thelist').load('test.html', function() {

loaded();

});

}

</script>

<div...>

...

...

</div>

test.html <- not use.. <html>...<body> tag~ Just~ HTML contents~

John Deighan

unread,

Nov 1, 2011, 4:42:47 PM11/1/11

to isc...@googlegroups.com

I believe that the main problem with getting iScroll to work for iframes is that the events (touchstart, touchmove, touchend) are generated in the page contained in the iframe, and although those events "bubble up" through the DOM, they don't bubble up past the iframe boundary. I've seen this before and I believe it is intended behavior. I have a solution that may not be considered good enough, but it might lead to an even better solution. My solution is to embed JavaScript in the embedded page (i.e. the page displayed inside the iframe) that causes the wrapper element - the one in the enclosing page which itself contains the iframe, to scroll the iframe. So, I've attached 2 files - test1.htm and test2.htm. The first, test1.htm, contains the content to be displayed in the iframe. The second, test2.htm, is the one you want to display in your browser, and contains an upper fixed positioned div, and a lower fixed positioned div which contains an iframe. Note the following: 1) I'm almost positive that both files have to be served from the same server, or at least the same domain, 2) test1.htm needs to know the id of the element that will contain the iframe in test2.htm ('second' in this case), 3) the scrolling is a bit jerky and there is no movement after you remove your finger from the screen ('inertia', I think it's called). I'm kinda hoping that the ideas in these files can be incorporated into iScroll 4 to make scrolling more intuitive. Also, the example code is code that I found somewhere in the web, but I can't remember where or I'd give the author credit. I think that since the 2 pages come from the same server, it may be possible to install the event handlers from test2.htm, even though they have to be attached to elements in test1.htm - I just haven't had the chance to try that yet. That would remove the objection that if you have a single page with an iframe, that may display up to 100 pages inside the iframe, 100 pages need this new code added (In our case, the 100 pages are built using the same code that will be able to add the needed code automatically). Also, that would mean that only test2.htm, the enclosing page, would need to know the id attribute of the wrapper element.

test2.htm

test1.htm

John Deighan

unread,

Nov 2, 2011, 1:38:27 PM11/2/11

to isc...@googlegroups.com

Here is a set of files with a solution where 1) the JavaScript runs in the enclosing page (test2.htm), though it stores and manipulates variables in the embedded page (so this will work if there are multiple iframes) and 2) the upper div contains links to load a different file in the iframe - the iframe has an onload handler so that the scrollability is enabled each time a new page is loaded into the iframe. Once again, all files must be served from the same server.

test2.htm

test1a.htm

test1b.htm

test1c.htm

Greg Baker

unread,

Nov 2, 2011, 11:17:05 PM11/2/11

to isc...@googlegroups.com

This is interesting. I use an older version of iScroll inside of an iFrame on the iPad without trouble. I have never tried it on an iPhone; a little small I think. But on the iPad, no problem. Is this a problem with the newest version of iScroll only, maybe?

Perhaps I will try it on an iPhone for myself when I get some time, and see what happens.

Greg

Tim Stewart

unread,

Apr 25, 2012, 7:03:59 PM4/25/12

to isc...@googlegroups.com

John, if there were an upvote, like or +1 button you'd get it from me. After trying several other approaches to solving this problem I was starting to despair, but adding your code works! Yes, the scrollling's a bit jerky, it would be great if cubiq could integrate this approach in the library and provide 3D accel, scrollbars ect. for iFrame content, but right now I'm just happy to have it working at all. Thanks John!

Lacrymosa

unread,

May 10, 2012, 1:36:13 AM5/10/12

to isc...@googlegroups.com, Goutham. Ganesh

Hi John,

i had similar problem and i tried your solution it works great thanks to you, i am able proceed with wortk. but i noticed 2 things

Scroller is not visible while scrolling in the iframe. Is it some thing i am missing like css or something for the scroller.
If TextInput is multiline i am not able to scroll, i am not sure if your solution works for textinput.

regards

Goutham Ganesh V

John Deighan

unread,

May 10, 2012, 8:22:31 AM5/10/12

to isc...@googlegroups.com

Sorry, but I haven't worked with this code in a long while. Hopefully it
will point you in the right direction, but I'm now retired and unable to
help resolve your problem.

On 5/10/2012 1:36 AM, Lacrymosa wrote:
>
> Hi John,
>
> i had similar problem and i tried your solution it works great thanks to
> you, i am able proceed with wortk. but i noticed 2 things
>