草庐IT

javascript - 页面在 iPhone 中存在虚拟键盘时向上滚动

coder 2025-01-15 原文

我的网站上有一个聊天应用程序页面。主容器在移动设备上占据完整的高度和宽度。容器有 position: fixed 和里面的 3 个 div position:absolute。最后一个 div #app-msg-composer 有一个 textarea 并像其他聊天应用程序一样在其中发送 button 。以下是简要代码:

<div id='app-container'>
    <div id='app-header'></div>
    <div id='app-body'></div>
    <div id='app-msg-composer'>
         <textarea></textarea>
         <button>Send</button>
    </div>
</div>

#app-container{
    position: fixed;
    height:100%;
    width:100%;
    top: 0px;
    bottom:0px;
}
#app-header{
    position:absolute;
    height:48px;
    width:100%;
    top:0px;
}
#app-body{
    position:absolute;
    top:48px;
    bottom: 74px;
    width:100%;
}
#app-msg-composer{
    position:absolute;
    bottom:0px;
    height:74px;
    width:100%;
}

当 textarea 被点击并获得焦点时，虚拟键盘的存在使得页面的上半部分向上滚动(超出视口(viewport))。此问题仅与 iPhone 有关，因为它在其他 Android 设备上运行良好。我搜索了这个问题，发现这是 iphone 中的一个常见问题，因为:

在 iPhone 上，虚拟键盘的存在不会改变视口(viewport)高度。

我尝试了一些来自 stackoverflow 的解决方案，但没有奏效。由于我没有使用任何库，如何仅在 javascript 或 css 中执行此操作？

最佳答案

您需要将 CSS 属性 position 更改为 fixed。这样，它实际上是“固定的”。它也不能随着屏幕大小的改变而移动。

另一种方法是将其简单地对齐到屏幕的最顶部。应该这样做是为了让 tip 元素保持在顶部，中间在中间......

关于javascript - 页面在 iPhone 中存在虚拟键盘时向上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48729542/

javascriptiPhonecodesectionpositioncssmobile-safari

有关javascript - 页面在 iPhone 中存在虚拟键盘时向上滚动的更多相关文章

  1. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  2. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  3. ruby-on-rails - rspec - 如何检查方法是否存在？ - 2

    我的模型有defself.empty_building//stuffend我怎样才能对这个现有的进行rspec？，已经尝试过:describe"empty_building"dosubject{Building.new}it{shouldrespond_to:empty_building}endbutgetting:Failure/Error:it{shouldrespond_to:empty_building}expected#torespondto:empty_building 最佳答案 你有一个类方法self.empty_bu

  4. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  5. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc

  6. ruby-on-rails - ActiveRecord 的 find_or_create* 方法是否存在根本性缺陷？ - 2

    有几种方法:first_or_create_by、find_or_create_by等，它们的工作原理是:与数据库对话以尝试找到我们想要的东西如果我们找不到，就自己做保存到数据库显然，并发调用这些方法可能会使两个线程都找不到它们想要的东西，并且在第3步中一个线程会意外失败。似乎更好的解决方案是，创建或查找即:提前在您的数据库中创建合理的唯一性约束。如果你想保存一些东西，就保存它如果有效，那就太好了。如果它因为RecordNotUnique异常而无法工作，它已经存在，太好了，加载它那么在什么情况下我想使用Rails内置的东西而不是我自己的(看起来更可靠)create_or_find？

  7. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  8. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  10. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

随机推荐