Question

我必须显示一个全屏模式，其中包含一个iframe和一个带有输入文本字段的表单。我已经使iframe能够正确显示和滚动。

但是，当我开始在输入字段中输入内容时，整个iframe一直滚动到底部，因此您看不到要在字段中输入的内容。它只会在您开始输入时滚动，而不是聚焦。

这发生在iOS Safari或Chrome上，而不是在Android设备上。另请注意，如果我稍微滚动到底部，以便输入字段位于屏幕的垂直中心（即屏幕的上半部分）附近，然后单击并在该字段上键入，就不会发生此问题。 / p>

<body>
  <!-- some contents -->
  <div class="wrapper">
    <iframe src="http://iframe.com" />
  </div>
</body>

body {
  position: fixed; // I only set this to fixed via JS when modal pops-up
}

.wrapper {
  -webkit-overflow-scrolling: touch;
  position: fixed;
  overflow-y: scroll;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

iframe {
  width: 100%;
  height: 100%;
  z-index: 99999;
}

感谢您的帮助和指点。谢谢！

Answer 1

通过将包装器设置为private static List<string> GetCifIds(dynamic themeParameters) { var items = JArray.Parse(themeParameters); var cifIds = new List<string>(); foreach (var dynamicCif in items) { cifIds.Add(dynamicCif.cifId.ToString()); } return cifIds; }而不是var assigned_variable = (function( $ ) { function test_function(counter){ "add your code for changing the counter" } return { test_function : test_function, } })(jQuery); function Innerfunction(counter){ assigned_variable.test_function(counter); }并将以下CSS设置为position: absolute和fixed来解决此问题。

html

包装器CSS现在看起来像这样：

body

在iframe中输入字段上键入会导致iframe滚动到底部

1 个答案: