Vue移动端输入框被键盘遮挡：添加空间为何推挤元素而非生成滚动区？

在Vue大型项目的移动端场景下，输入框会被弹出的键盘遮挡，导致用户无法查看当前输入的内容。我尝试给输入框绑定@focus和@blur事件，触发为布局根div添加/移除.keyboard类——该类设置了height: calc(100% + 500px)和overflow-y: scroll，但添加类后页面元素被推挤变形，并没有生成预期的可滚动额外空间。本人缺乏移动端开发经验，希望能得到解决思路。

相关代码如下：

<template>
  <div
    ref="divMain"
    class="h-screen bg-white sm:flex sm:flex-wrap sm:justify-center sm:text-center mainLayout"
  >
    <PageHeader
      :noRedirect="step > 0"
      :progress="progress"
      class="h-28"
      @back="back()"
    >
      <h2
        class="h-14 flex items-center text-xl text-primary font-semibold sm:hidden"
      >
        {{ t('createAccount') }}
      </h2>
      <Logo class="w-20 h-12 hidden sm:inline-block" />
    </PageHeader>

    <component
      :is="forms[step].name"
      class="max-w-lg mx-auto p-4"
      @submit="forms[step].handler($event)"
      @inFocus="layoutChange"
      @inBlur="removelChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'


export default defineComponent({
  name: 'CreateAccount',
  components: {
    PageHeader,
    Logo,
    FullNameForm,
    ContactInformationForm,
    PhoneVerificationForm,
    LocationForm,
    BirthdayForm,
    ProfilePhotoForm,
    GenderForm,
    RatingForm,
    ClaimProfileForm,
    CountryForm,
    EmailVerificationForm
  },
  setup() {
    const store = useStore()
    
    const divMain = ref<HTMLElement | null>(null)
    const layoutChange = () => {
      if (divMain.value) {
        divMain.value.classList.add('keyboard')
      }
    }

    const removelChange = () => {
      if (divMain.value) {
        divMain.value.classList.remove('keyboard')
      }
    }

    return {
      t,
      step,
      forms,
      back,
      next,
      progress,
      getAccountData,
      layoutChange,
      removelChange,
      divMain
    }
  }
})
</script>

<style>
.mainLayout.keyboard {
  height: calc(100% + 500px);
  overflow-y: scroll;
}
</style>

界面状态说明：

• 初始界面：
• 添加.keyboard类后的界面：

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo