问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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 上检查的全屏 url

https://skuo5.codesandbox.io/

只需在 iPhone 或带有 IOS 12+ 的 XCode 中打开尝试滚动，然后专注于输入并再次尝试滚动。

原文由 Dzmitry Vasilevsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlioscss
阅读 1.3k
2 个回答
得票最新
社区维基
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，你可以找到特定代码的替代品。

原文由 Prajyot Tote 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

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

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

滚出屏幕

查看此博客文章以获取更多详细信息和更多奇怪行为的示例（我从中复制了上面的图片）： https ://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard -b5aa3f34228d

原文由 jpenna 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题