在我的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">
部分工作,其余部分是固定的
欢迎任何想法和意见。
1条答案
按热度按时间umuewwlo1#
对于不自然的滚动行为,在你的身体或相关部分的css行将修复它:
-webkit-overflow-scrolling: touch