问答博客资讯标签用户活动
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/Chrome - 在模态内聚焦输入时不需要的滚动

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

在 Safari 和 Chrome 中测试 - 结果相同，所以我认为这是 iOS 问题。

仅当模态内有输入并且我点击该输入时才会发生这种情况。在输入获得焦点和原生 iOS 键盘变得可见的同一时刻。

模态下方的页面在同一时刻自动滚动到其高度的 50%。这种行为是完全不需要的，我不知道如何阻止这个默认的 iOS“功能”。

演示：

在此处输入图像描述

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

Stack Overflow 翻译javascripthtmlioscssvertical-scrolling
阅读 309
2 个回答
得票最新
社区维基
1
✓ 已被采纳

只需在此处添加一个答案，以防人们偶然发现这个问题（ 而不是你的其他问题，它有一个很好的演示来说明这个问题）

我们在工作中面临着类似的问题。正如您所提到的，偏移量始终为页面高度的 ~50%，无论您的初始偏移量在哪里，都会发生这种情况。

过去，当我在早期的 iOS 版本中观察到类似的“跳跃”（尽管跳跃不那么剧烈）时，我通常会通过应用 position: fixed （或 relative ）来解决这个问题到 body （ 允许 overflow: hidden 正常工作）。

但是，如果用户向下滚动，这会导致用户跳回页面顶部的意外后果。

所以，如果你愿意用一些 JavaScript 来解决这个问题，这里是我整理的一个修复/破解：

 // Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

以及 CSS 的样子：

 .modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

这是您的演示页面的一个分支（来自您的其他问题），以说明： https ://jpattishall.github.io/sweetalert2/ios-bug.html

对于那些正在寻找更通用的修复方法的人，您可以在打开/关闭模态时执行以下操作：

 function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

编辑：为了避免桌面上的“移动/取消移动”，我建议功能检测/ua 嗅探将其仅应用于移动 safari。

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

社区维基
1

为了阻止页面在 x 轴和 y 轴上滚动，我们在 css 中使用 overflow: hidden; 属性。

所以如果我们把它应用到身体上，

 body {
    overflow: hidden !important;
}

它应该工作吧？

事实上，这实际上是行不通的，因为您刚刚一直禁用整个页面的 x 和 y 滚动。

为了绕过这个，我们可以使用一点点 javascript 在模态处于活动状态时向正文添加一个类。

首先，我们必须为我们的主体添加一个 id， <body id="body"> 这允许 javascript 识别主体。

其次，我们必须为我们的模态添加一个 id <div id="modal"> ，同时允许 javascript 识别模态。

 <script type="text/javascript">
    function modalActive() {
        if (document.getElementById("modal").classList.contains("active")) {
            document.getElementById("body").classList.add("modal-active");
        } else {
            getElementById("modal").classList.remove("active"));
            getElementById("body").classList.remove("modal-active"));
        }
    }
</script>

对于启动和关闭模式的按钮，我们必须添加一个 onclick 事件，

<button onclick="modalActive()">Click Me!</button>

最重要的是，我们必须将其添加到 css 文件中。

 body {
    overflow: initial !important;
}

body.modal-active {
    overflow: hidden !important;
}

我们开始了。

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

查看全部 2 个回答
推荐问题