Question

有一种已知的技术可以在打开模式窗口时禁用页面滚动。

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

全屏网址，可在iPhone上查看
https://skuo5.codesandbox.io/
只需在iPhone或带有IOS 12+的XCode中打开，请尝试滚动，然后将焦点放在“输入”上，然后尝试再次滚动。

Answer 1

只是经过乏味的搜索，就像您在以下文章中所指出的那样，这似乎是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，则可以找到特定代码的替代内容。

Answer 2

请您试试这个CSS。.

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height: 100vh;
  overflow: hidden;
}

Answer 3

只是一些到达这里的人的信息。

Safari 认为这是功能。有一个错误报告 here（让他们知道您不喜欢这个“功能”=]）。

当您打开键盘时，浏览器的 window 会向上移动并且您的内容被隐藏，因为 window 不在屏幕上。其他奇怪的行为也可能发生，就像 OP 展示的那样。

查看这篇博文了解更多细节和更多奇怪行为的例子（我复制了上面的图片）：https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d

Answer 4

尝试使用此CSS。

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  min-height: 100%;
  bottom:0;
  top:0;
  overflow: hidden;
}

Answer 5

我在我的一个项目中做到了这一点...

打开键盘时，请在身体上使用它

$(body).bind('touchmove', function (e) {
    e.preventDefault()
});

然后在您要再次滚动时取消绑定

$(body).unbind('touchmove');

如果将其与height：100％或100vh结合并溢出：隐藏。它应该工作。

iOS Safari：打开键盘并禁用主体滚动时不需要的滚动

5 个答案: