iOS Safari：打开键盘并禁用主体滚动时不需要的滚动
有一种已知的技术可以在打开模式窗口时禁用页面滚动。
CSS：
html {
height: 100%;
}
body.disable-scroll {
position: fixed;
height: 100%;
overflow: hidden;
}
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="disable-scroll">
<div class="page-content">
<input type="text">
... content ...
</div>
</body>
</html>
但是在IOS上，打开虚拟键盘后，Safari滚动启用。而且它滚动的甚至更多window.innerHeight + window.scrollX。页面底部会出现一些空白。
编辑者的网址
https://codesandbox.io/s/condescending-snow-skuo5?fontsize=14
全屏url以在iPhone上检查
https://skuo5.codesandbox.io/
只需在iPhone或带有IOS 12+的XCode中打开，请尝试滚动，然后将焦点放在“输入”上，然后尝试再次滚动。
jpe*_*nna 17
只是为到达这里的人提供一些信息。
Safari 认为这是一个功能。这里有一个错误报告（让他们知道你不喜欢这个“功能”=]）。
当您打开键盘时，浏览器window会向上移动，并且您的内容会被隐藏，因为浏览器window会超出屏幕。其他奇怪的行为也可能发生，就像 OP 所展示的那样。
查看此博客文章以获取更多详细信息和更多奇怪行为的示例（我从中复制了上面的图片）： https: //blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard -b5aa3f34228d
- safari 是一个新的 IE，人们就是这么说的 (19认同)
- 这里（至少）有 2 个 Safari 错误 - 您链接到的错误与收回浏览器 chrome 和 100vh 有关，这里有更好的解释：https://developers.google.com/web/updates/2016/12/url -bar-resizing 第二个 bug 与屏幕键盘处理有关，事实上 Safari 在键盘可见时添加了滚动高度，并且此行为无法控制（并且没有调整大小事件或其他事件来检测）它）。 (3认同)
Pra*_*ote 11
刚刚经历了乏味的搜索，似乎这是 iPhone 的问题，正如您在以下文章中指出的那样：https : //blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d
因此，您肯定无法使用 css 来做到这一点。
但这并不能阻止您使用 JQuery 和 Javascript >:)
这是针对您的场景的一个不整洁的解决方法。仅在 iPhone 上测试了多个文本框：
document.getElementById("app").innerHTML = `
<div class="page-content">
<input type="text"
onfocus="disableScrolling(this)"
onfocusout="enableScrolling(this)">
<p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>
<input type="text"
id="text2"
onfocus="disableScrolling(this)"
onfocusout="enableScrolling(this)">
<p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p><p>Page content</p>
</div>`;
var currentElem;
function stopScroll()
{
if(currentElem)
{
var top = $("input:focus").offset().top;
$('html, body').stop().animate({
scrollTop: top
}, 500, function(){});
}
}
function disableScrolling(elem)
{
currentElem = elem;
document.addEventListener("touchend", stopScroll);
setTimeout(function()
{
stopScroll();
},10);
}
function enableScrolling()
{
currentElem = undefined;
document.removeEventListener("touchend", stopScroll);
}html {
height: 100%;
scroll-behavior: smooth;
}
body.disable-scroll {
position: fixed;
height: 100%;
overflow: hidden;
}
.page-content {
background: #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="disable-scroll">
<div id="app"></div>
<div>End of body</div>
</body>问题：用户可以在专注于
textbox
假如说，
解决方案：允许用户滚动到他想要的任何地方，一旦他完成，将他平滑地回到你想要他去的地方；
input:focused:p
注意：我使用 JQuery 使事情变得更简单。如果你想使用纯 javascript，你可以找到特定代码的替代品。
- 感谢您的帖子，最好滚动回焦点输入！只有两件事：最好在答案本身中添加相关代码，这样当链接失效时解决方案就不会消失。另外，我不太确定为什么你会建议人们使用 jQuery 而不是 vanilla javascript。如今 jQuery 确实不再需要了。 (4认同)
- 冷静点兄弟。我的沟通能力不太好>.<!! 当我说我是老派时，我并没有证明我的建议是正确的。我只是让你知道我倾向于 jq。我非常同意你的观点，这就是为什么我已经从我的答案中删除了“jquery 建议”部分:) (3认同)