Home > Developer > Web Develop
Enables IFRAME to support Scrolling on iOS devices and iframeios devices.
Original article: Scroll IFRAMEs on iOS
Original Article Date: January 1, July 02, 2014
Translated on: February 1, July 10, 2014
Translated by: Tie
For a long time, the elements in Safari on iOS devices that exceed the border cannot be rolled, which has been a torment for developers. This is especially frustrating for the original author's blog, because the demo program runs in the sandbox IFRAMEs, so that the AJAX page loading policy of the blog website is not affected. through some research, we found that this problem is solved by setting two CSS attributes and adding an element. here we go!
(Translator's note: At the beginning, the problem was handled through JS monitoring. The problem was that the response was not very responsive and various browser compatibility issues had to be handled .)
Click to view the sample program (you can try it on the iPhone, address: http://davidwalsh.name/demo/scroll-iframes-ios.php)
Support for scrolling iframe page EffectsHTML code
When using IFRAME or other HTML elements, you need to use an element (such as DIV) to wrap them:
<div class="scroll-wrapper"> <iframe src=""></iframe></div>This DIV serves as the basic container that supports internal scrolling.
. Scroll-wrapper {-webkit-overflow-scrolling: touch; overflow-y: scroll;/* tip: add the dimensions or positioning value here) information! */}. Scroll-wrapper iframe {/* the style you specify */}
-Webkit-overflow-scrolling: touch;Attribute values are designed specifically for elements that need to be rolled during browser overflow. If this attribute is not specified, if you want to scroll iframe, it will actually lead to scrolling of the outer page. With this attribute, you can control the scrolling of IFRAME! In the original author's blog site, the following CSS is used:
.demo-iframe-holder { position: fixed; right: 0; bottom: 0; left: 0; top: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll;}.demo-iframe-holder iframe { height: 100%; width: 100%;}
Please add this article to favorites for query or use. Remember that this CSS attribute is set on the packaging element rather than on the rolling element itself!
Idea, basically implemented using js
1: Use js to determine whether the iframe scroll bar is scrolled to the bottom
2: When scrolling to the bottom, if html has a scroll bar, it will scroll to the html scroll bar.
These things are very simple. You can write down your ideas and then use the code in every small step.
By combining the code of each small cloth, you can achieve the desired effect,
Baidu and google are very useful for learning programming. It is very helpful to use search more,
This is my experience,
Although no direct results are provided, it is okay to make every small step,
How to make the iframe page scroll to the specified position during loading?
<Br>
<! -- # -->
<! -- Add the following code to the <body> area -->
<Iframe id = "datamain" src = "www.baidu.com" width = 200 height = 150 marginwidth = 0 marginheight = 0 hspace = 0 vspace = 0 frameborder = 1 scrolling = no> </iframe>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
