问题描述
我有一种奇怪的情况,听起来很像,但有一个转折。这只在父文档可滚动时才会发生。我也在使用iframe。以下是我正在显示的HTML表示形式
使用位置:绝对的
似乎不可行,因为 .myCtrl 无法从输入焦点收到任何事件通知。
-webkit-overflow-scrolling :touch; 似乎不可行,因为 .myCtrl 被添加到主体,并且我无法控制内容结构。
似乎也不起作用。
决方案我有同样的问题,这是我想出了以解决这个问题。
问题在于Iframe容器正在失去其位置(我的位置已修复),并且它变为绝对位置。
所以我希望它在修复时打开键盘,确保窗口不会滚动太多。
所以这里是代码:
window.onscroll = function(){//当键盘打开时调用
if(window.pageYOffset> window.innerHeight / 3){//我的决定你可以像使用
一样玩它。window.scrollTo(0,window.innerHeight / 3);
if(document.getElementById('IframeWrapperID')。style.position!=='fixed'){
document.getElementById('IframeWrapperID')。style.position ='fixed';
}
}
};
*我的iframe具有绝对位置。
希望它有帮助。I have a strange situation that sounds very much like the many fixed element issues with iOS on Stack Overflow, but with a twist. This only happens when the parent document is scrollable. I am also using an iframe. Below is a representation of the HTML I am displaying
<body> /* main content */ <div class="myCtrl"> <iframe src="page2.htm"/>//iframe contains html page with an input element <div></div> </div> </body>.myCtrl has a style of:
.myCtrl { max-width: none; max-height: 690px; width: 100vw; height: 75vh; bottom: 0; z-index: 1000; right: 0; }The iframe contains several input elements that when focused (and soft keyboard pops up), .myCtrl is pushed out of view. If I type something, .myCtrl comes back in to view and is displayed correctly. If I remove focus from an input, .myCtrl does NOT leave the view and correctly stays put. The .myCtrl will then behave correctly, respecting position:fixed, for the rest of the browser session regardless if an input has focus or not.
both the parent page and the iframe have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> in the header.
Meta tag solutions don't seem to work.
using position:absolute doesn't seem feasible since .myCtrl is not able to receive any event notifications from input focus.
-webkit-overflow-scrolling:touch; doesn't seem feasible since .myCtrl is appended to the body, and I have no control over the content structure.
css font resizing doesn't seem to work either.
解决方案I had the same problem and this is what I came up with in order to solve it.The issue is that the Iframe container is losing his position (mine was fixed ) and it get changed to absolute.
so I wanted it to be fixed when the keyboard is open, and make sure that the window wont scroll too much.
so here is the code:
window.onscroll = function () {//is called when the keyboard is open if (window.pageYOffset > window.innerHeight / 3) {//my decision you can play with it as you would like window.scrollTo(0, window.innerHeight / 3); if (document.getElementById('IframeWrapperID').style.position !== 'fixed') { document.getElementById('IframeWrapperID').style.position = 'fixed'; } } };*My iframe had position absolute.Hope it helped.
这篇关于输入焦点时,iOS 8.3固定HTML元素消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!