Scrolling within an iframe

Need help
1

Hi everyone.

I’m trying to make a native app in which you can tap a button to load a dictionary (wordreference.com) in a popup window.

I’m using the iframe src code with the url, which loads fine in the bubble iOS app, but I can’t tap and hold to scroll inside the iframe. I can interact with the site, everything seems fully functional, except scrolling. I tried the scrolling=“yes” option in the code, didn’t work.

Thanks in advance to anyone who can help. Richard.

2

Can you share a link and the html code you’re using?

3

Hi emmanuel,

The code is:

I’ve also deployed a live version, as the https preview in the editor didn’t let me load the website in the iframe. The dictionary button in the web version scrolls fine, just the Bubble app viewer that doesn’t scroll. Check it out:

www.activateenglish.com

Thanks, Richard.

4

Sorry, noob mistake, code is:

iframe src=“http://www.wordreference.com” width=269px height=351px scrolling=“yes”

/iframe

5

It seems we need some credentials. Can you put it in a public page?

6

No problem, I’ve just limited the app to the dictionary button and its popup:

www.activateenglish.com

I have to publish it to live because in development mode it won’t load the webpage in the iframe.

Richard.

7

So it works fine on the web but not in the app? Might not be an easy fix unfortunately.

8

Actually if you try to access it through a mobile browser it’s the same issue, I’ve tried Firefox, Safari and Chrome.

9

Oooh wait, might have just answered my own issue:

Seems this is a general issue with iOS not being able to scroll iframes, which can be solved via CSS. Will test this when I get back on the desktop.

10

Bingo! Problem solved. Here’s the code that fixed it:

(taken from http://stackoverflow.com/questions/26046373/iframe-scrolling-ios-8 )

<style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="http://www.wordreference.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
3 Likes
11

Good job!

12

Thanks for this help @richardosborne14 and @emmanuel

It works well to scroll HTML in a fixed size. The only issue I am experiencing is that when the user scrolls to the bottom of the HTML using this… It will refresh the page.

It only refreshes if the user scrolls all the way to the bottom, otherwise this is fine…
See video for example … Any ideas how to turn this off. Its only triggered by HTML somehow.

VIDEO EXAMPLE

13

Hey, first time contribution here, and it’s a few years late. But I think the CSS you want for this is overscroll-behavior: none; or overscroll-behavior: contain; on the iframe or its contentWindow