我在应用程序中的 Vue 组件中有以下层次结构和样式：
<template lang="pug">
my-modal-component.modal-container
template(v-slot:content)
swiper.swiper(
:options="swiperOptions"
ref="feedback-swiper"
@slideChangeTransitionEnd="onTransitionEnd"
@slideNextTransitionEnd="onSlideNextTransitionEnd"
@slidePrevTransitionEnd="onSlidePrevTransitionEnd")
swiper-slide.page-container(ref="modal" @scroll.native="handleScroll")
.content-root(:class="transitioning ? 'disable-interaction' : ''")
div
.main-text Main Text
pill-selector
.additional-details-container
.main-text Main Text
textarea.additionalDetails
.char-count number of cur chars
.contact-me
input.input(type="checkbox" v-model="contactMe")
label.label(@click="toggleContactMe")pls help
.swiper-pagination.pagination(slot="pagination")
.swiper-button-prev.prev-slide(slot="button-prev" @click="goToPreviousSlide()")
.swiper-button-next.next-slide(slot="button-next" @click="goToNextSlide()")
.button-container
my-button.main-button SUBMIT
</template>
.modal-container {
color: color(brown);
.button-container {
padding-bottom: 30px;
.main-button {
visibility: hidden;
width: 100%;
}
.hidden {
visibility: hidden;
}
}
.page-container {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
.content-root {
display: flex;
flex-direction: column;
height: 1000px;
}
}
}
handleScroll函数每次都会在所有桌面操作系统上使用所有浏览器以及 Android 设备捕获@scroll.native事件。
但是，在所有 iOS 设备上，@scroll.native事件仅在有时触发。这导致滚动并不总是有效。
我试过：
- 用不同的方法将组件和主体锁定在其后面
- 从应用程序中删除所有其他
-webkit-overflow-scrolling实例 - 实施 https://github.com/willmcpo/body-scroll-lock
- 涉及
overflow-y和-webkit-overflow-scrolling的各种层次结构+css更改组合
事实证明，这只能在iOS模拟器中重现。在实际的iOS设备中，问题不存在。这是我遇到的第一个模拟器与实际设备行为不同的实例。