模式中的 Div 并不总是在 iOS 上触发滚动事件

Question

我在应用程序的 Vue 组件中具有以下层次结构和样式：

<template>

    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;

        }

    }

}

该功能每次在所有桌面操作系统上使用所有浏览器以及Android设备捕获事件。[e-mail]

但是，在所有 iOS 设备上，该事件只是有时触发。这导致滚动并不总是有效。@scroll.native

我试过：

• 用不同的方法将组件和主体锁定在其后面

• 从应用程序中删除 的所有其他实例-webkit-overflow-scrolling

• 实施 https://github.com/willmcpo/body-scroll-lock

• 各种层次结构 + css 更改组合涉及和overflow-y-webkit-overflow-scrolling

Answer 1

事实证明，这只能在iOS模拟器中重现。在实际的iOS设备中，问题不存在。这是我遇到的第一个模拟器的行为与实际设备不同的实例。