草庐IT

javascript - iOS Safari/Chrome - 在模态内聚焦输入时不需要的滚动

coder 2023-07-25 原文

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

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

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

演示:

最佳答案

只是在这里添加一个答案，以防人们偶然发现这个问题 (rather than your other question, which has a great demo to illustrate this issue)

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

过去，当我在早期的 iO​​S 版本中观察到类似的“跳跃”(尽管跳跃不那么剧烈)时，我通常会通过应用 position: fixed(或 relative) 到 body ( which allows overflow: hidden to properly work )。

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

因此，如果您愿意使用一些 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。

关于javascript - iOS Safari/Chrome - 在模态内聚焦输入时不需要的滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37287148/

内聚入时documentcodebodyjavascripthtmlioscssvertical-scrolling

有关javascript - iOS Safari/Chrome - 在模态内聚焦输入时不需要的滚动的更多相关文章

  1. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - attr_accessor 在写入时将 nil 转换为字符串 - 2

    我有一个数据对象，其中包含许多用于各种输入的attr_accessor字段。我可以以某种方式定义类，以便所有字段的所有setter都将例如将值设置为空字符串而不是尝试的nil？ 最佳答案 这里有一个小模块可以做到这一点:moduleNilToBlankAttrAccessordefnil_to_blank_attr_accessor(attr)attr_readerattrdefine_method"#{attr}="do|value|value=''ifvalue.nil?instance_variable_set"@#{attr

  4. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby-on-rails - 从 ruby​​ 中的对象中删除不需要的属性 - 2

    我有一个对象，它具有来自调用的数据库的所有属性让我们说:u=User.find_by_email("email@email.com")你有first_name,last_name,email,phone等如何从对象本身获取除first_name和last_name之外的所有属性，而不是通过修改对模型的调用？ 最佳答案 u.attributes.except("first_name","last_name") 关于ruby-on-rails-从ruby​​中的对象中删除不需要的属性，我们在

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 是否有 chrome 开关来抑制 'external protocol request' ？ - 2

    是否有chrome开关来抑制“外部协议(protocol)请求”？我正在使用selenium-ruby​​-watirwebdriver自动化应用程序。我在网上搜索了绕过此窗口和对话的解决方案:http://productforums.google.com/forum/#!topic/chrome/K22hXwRy6zQ概述了我们如何手动执行此操作。但是对于Selenium-Chrome-Ruby，我需要通过可能设置一个chrome开关(chorme开关列表:=http://src.chromium.org/svn/trunk/src/chrome/common/chrome_swit

  9. ruby-on-rails - rails 不需要 Content-Type "application/json" - 2

    我在rails中有一个API端点，默认情况下，如果您没有设置任何Content-Typeheader，则会处理中的参数application/x-www-form-urlencoded有没有办法在不指定header中的内容类型的情况下处理来自POST请求的rails中的json字符串？ 最佳答案 在您的routes.rb文件中，您可以将POST路由放置在命名空间中，并像这样定义预期的格式:namespace:api,defaults:{format::json}dopost'example'=>'controller#action'

  10. ruby - 运行测试时静音 Chrome 驱动程序控制台输出 - 2

    我使用的是最新版本的Chrome(32.0.1700.107)和Chrome驱动程序(V2.8)。但是当我在Ruby中使用以下代码运行示例测试时:require'selenium-webdriver'WAIT=Selenium::WebDriver::Wait.new(timeout:100)$driver=Selenium::WebDriver.for:chrome$driver.manage.window.maximize$driver.navigate.to'https://www.google.co.in'defapps_hoverele_hover=$driver.find_

随机推荐