vue.js 移动的Web应用程序滚动问题,尤其是在iOS webkit上

tpxzln5u  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(236)

在我的vuejs项目中,有时候,一个滚动条在几秒钟内不工作,然后在特定的视图中再次工作。
它出现在Chrome和iOS webkit上,并且很容易找到一些带有输入标签和v-textfield的页面。(它是Web应用程序。)
请注意以下条件并给予建议。

  • Vuejs 3.0,某些部分使用Vuetify 3.0(版本:“vue”:“^3.2.13”,“vuetify”:“^3.0.0”,)
  • 对于滚动,使用带有vh的高度和溢出(auto和-x或-y scroll)
  • 在iOS webit上很容易找到(在iOS 15或更高版本上滚动和测试),当将屏幕设置为移动终端时,也可以在Chrome上重现

下面是一个vue文件的示例,它有这个问题。

<template>
  <div class="inner container editCar"> // height set by vh here.
    - header part   // height set fixed from top
   ...
    <div class="car_input-inner"> // input part - height, overflow set here
      <div class="car-input" >
         // Vuetify text feild
         // I'm new to Vuejs so leave some detail here, FYI.
          <v-text-field
            ref="registrationNumberField"
            outlined
            clearable
            hide-details
            type="text"
            v-model="binding.registrationNumber"
            @keydown.enter="util.handleFocus($event, unladenWeightField)" // From here, border-line changed by css
            @blur="resetBorderColor(registrationNumberField, LengthValid)"    
            @focus="applyBorderColor(registrationNumberField, LengthValid)"
            @click:clear="binding.registrationNumber = ''"
            maxlength="8"
            placeholder="car number (123가4567)"
            :class="{
              valid: binding.registrationNumber !== '' && LengthValid,
            }"
          />

        ... more simple v-text-field...

          <v-text-field
            style="margin-top: 1.2rem"
            ref="unladenWeightField"
            outlined
            hide-details
            type="number"
            v-model="binding.unladenWeight"
            @input="bindInput('unladenWeight', 5)"
            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            @keydown.enter="util.handleFocus($event, loadingWeightField)"
            @blur="resetBorderColor(unladenWeightField, true)"
            @focus="applyBorderColor(unladenWeightField, true)"
            maxlength="5"
            placeholder="Weight"
            :class="{
              valid: binding.unladenWeight !== '',
            }"
            suffix="t"
          />

        ... more simple v-text-field...

      </div>
    <div>
   ...
  - button group part (two buttons fixed from bottom)

</template>

字符串
仅供参考,滚动只在<div class="car_input-inner">部分工作,其余部分是固定的
欢迎任何想法和意见。

umuewwlo

umuewwlo1#

对于不自然的滚动行为,在你的身体或相关部分的css行将修复它:-webkit-overflow-scrolling: touch

相关问题