我必须显示一个全屏模式，其中包含一个带有输入文本字段的表单的 iframe。我已经让 iframe 正确显示和滚动。
但是，当我开始在输入字段中键入内容时，整个 iframe 一直滚动到底部，因此您看不到您在这些字段中键入的内容。它只会在您开始输入时滚动，不会在焦点上滚动。
这发生在 iOS Safari 或 Chrome 上，而不是在 Android 设备上。另请注意，如果我滚动到底部一点，则不会出现此问题，因此输入字段位于屏幕的垂直中心附近(即屏幕的上半部分)，然后再点击并在该字段上打字。
<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;
}
感谢任何帮助和指点。谢谢!
最佳答案
通过将包装器设置为 position: absolute 而不是 fixed 并将以下 CSS 设置为 html 和 body 来修复它。
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
包装器 CSS 现在看起来像这样:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
关于javascript - 在 iframe 中输入字段会导致 iframe 滚动到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52517430/