Fixing Overflow Content scrolling in iOS/iPad 2
Question
I have an issue where I can't get the safari mobile browser to scroll on an iframe VS extending the document to show the full content.
For context, I have a document outlined like this —
When I try to scroll horizontally on nav.html which is set to overflow-x: scroll and '-webkit-overflow-scrolling: touch;`. None of these work when testing in iOS 7 on the iPad 2. I also have tried testing in the iOS simulator and still no luck.
Where I'm having an issue is on the product pages here — http://idex-hs.viser.biz.dev.thevfiles.com/product-kiosk/v2-kiosk/index.html .
The above link is an iFrame wrapping the body of the main website. In the main website, we have an index.html page with 2 iFrame containers. 1 for the product (iframe[name='viewer']), and another for the nav (iframe[name='nav']). I have overflow: auto set to the viewer iframe and it seems to be working on overflow-y content. for the nav, the content protrudes out of the set-width container and will overflow the entire document, not just the nav on the div.nav in the nav iFrame.
Here's my index.html markup with both iframes (product/[product_number].html and nav.html) —
<body class="cat">
<div class="back-nav-cat"></div>
<!-- Navigation Links -->
<div class="cat-navigation back" onclick="location.href='../index.html';">BACK</div>
<!-- Viewer -->
<iframe src="products/P-715.html" frameborder="0" name="viewer" width="2560" height="1195" scrolling="no"></iframe>
<!-- Nav -->
<iframe src="nav.html" frameborder="0" name="nav" width="2560" height="245" scrolling="yes" style="position: absolute;"></iframe>
</body>
If anyone has an idea of 1) what causes this issue, and 2) what is a proven fix for this problem, I would greatly appreciate the help.
FYI: the domain is a testing domain for our agency, but feel free to approach with caution (I've been told it looks like a virus.... not our intention).
Thanks in advance.
EDIT:
Thanks to Ryan Wheale , all I needed to do was set the width of my nav iFrame to width: 100%. I also wrapped the iFrame in a wrapping div that has overflow-x: scroll; and -webkit-overflow-scrolling: touch; .
2 answers
solution1
1 ACCPTED 2014-11-18 00:09:23
overflow has no affect on frames. Set the frame width to something which will always fit on the screen (eg. 100%). Then, once the content inside of the frame starts to occupy more than its available width or height, scrolling will get triggered automatically (assuming you have the scrolling="yes" attribute set on the iframe.
For iOS, you will also need a wrapping DIV with some special CSS:
.iframe-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
}
<div class="iframe-wrapper">
<iframe scrolling="yes" width="100%" height="200px"></iframe>
</div>
I will still contend that this particular use case for frames became dated and archaic over 10 years ago and should not be used any more. You can take my word for it or not. Something as simple as the following should work. Aassuming you are using jQuery and your html pages are static, you will need to create a DIV in place of each of your iframes - give each DIV an ID instead of NAME:
$('#main').load('products/P-715.html');
$('#nav').load('nav.html');
solution2
0 2014-11-18 00:09:25
Is there a reason for using iframes?
Your "viewer" is larger than your content so it won't scroll if I understand your terminology correctly. Suggest you swap you heights around. Also, your content (img, text, etc) needs to be inside of a parent wrapper. If they are on the same DOM level there is relationship between the two and as such no scrolling.
Example
HTML
<div class="viewer">
<div class="content"></div>
</div>
CSS
div.viewer {
width: 2000px;
height: 500px;
overflow-x: scroll;
}
div.content {
width: 2000px;
height: 1000px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.