ios iframe 滚动
For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's AJAX pageload strategy. Some research revealed that there are only two CSS properties to set and one element to set them on. Here we go!
最长的时间是,开发人员对无法在iOS Safari页面中滚动的溢出元素感到沮丧。 对于我的博客,这尤其令人沮丧,因为我在文章本身顶部的沙盒IFRAME中展示了我的演示,以免影响我网站的AJAX页面加载策略。 一些研究表明,只有两个CSS属性可以设置,一个元素可以设置它们。 开始了!
HTML (The HTML)
In the case of an IFRAME and all other HTML elements, you'll want a wrapping element like a DIV:
对于IFRAME和所有其他HTML元素,您将需要像DIV这样的包装元素:
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div>
This DIV will serve as the base container for what's scrollable inside.
该DIV将用作内部可滚动内容的基础容器。
The CSS CSSOne familiar property and one lesser-known property will be used to allow scrolling for the IFRAME:
一个熟悉的属性和一个鲜为人知的属性将用于允许滚动IFRAME:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
The -webkit-overflow-scrolling: touch; property and value were created especially for the case of overflow scrolling within the browser. Without this the page will scroll when you scroll the IFRAME area; with it you get control of the IFRAME! For my site's case, I use the following:
-webkit-overflow-scrolling:触摸; 属性和值是专门为浏览器中的溢出滚动而创建的。 如果没有此功能,则在滚动IFRAME区域时页面将滚动。 有了它,您就可以控制IFRAME! 对于我的网站,我使用以下内容:
.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%;
}
Keep this tip handy and remember the special CSS goes on the wrapper and not the scrollable element itself!
请随时使用此技巧,并记住特殊CSS位于包装器上,而不是可滚动元素本身!
ios iframe 滚动