Jump to content
  • 0

Nav Bar with iFrames Not Scrolling On iOS



I'm having trouble getting iFrames to work properly on iOS. Everything works on desktop and Android, however on iOS (Safari or Chrome iOS), the contents inside the iFrames are not scrollable. Not only that, but I was struggling with changing the size of the iFrame with CSS. I originally was just going to create my own navbar without the use of iFrames, but I decided to take the challenge and figure this out.

After a couple of weeks, I finally found a fix for this. I tried a ton of different things, some worked but made the scrolling super buggy. This is the best solution I have found. The biggest problem with this so far is that you get double scrollbars on your page. However, scrolling works very fluidly.

On your navbar page, insert height=200 and scrolling=no on each iframe tag. 

<iframe src="" height=200 scrolling=no></iframe>

Then, on the iFrame page itself (the src of the iframe) insert this in the Header:

html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}


Hope this helps someone else in the future. Cheers.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

So, I've got the navbar all coded out..  Not sure what deployment method I should use. Also think I need JS to get the DataPages to load underneath the tabs from the anchor tag when clicked. If I put the URL deployment in the anchor tags, it opens up the datapage in a new window. :mellow:


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...