如何让用户在移动设备上滚动浏览模式？

Question

我有一个模式组件，要求用户输入他们的用户名和密码，然而，当我试图输入用户名或密码时，我弹出虚拟键盘，阻止我键入的内容。请参见下图。我希望能够向下滚动以查看输入字段，但我不能这样做。我不完全确定我应该在哪里添加相关的CSS来修复这个问题，但是我的模式的CSS是在this file中定义的，它看起来像这样：

.sr-modal {
  @apply fixed top-5 left-6 right-6 overflow-y-scroll overflow-x-hidden
  focus:outline-none
  ml-auto mr-auto pt-10 pb-5
  text-dark
  border-2 border-white
  bg-dark
  shadow-lg
  rounded-2xl
  z-30;
  max-width: 25rem;
}

请注意，我使用的是TailwindCSS，但这并不重要。另外，请注意我的模式是一个Vue组件(也不应该有什么关系)。

如果任何人有任何建议，请让我知道！

​

​

Answer 1

我已经弄明白了。我只需要将位置从fixed改为absolute。