Nav Bar with iFrames Not Scrolling On iOS

[kpcollier]

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:

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

 

Hope this helps someone else in the future. Cheers.

[kpcollier]

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. 

https://codepen.io/kpcollier/pen/vPRMRp?editors=1100

[kpcollier]

Updated OP with the solution to iFrame Scrolling on iOS problem.