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

Question

我在应用程序的 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;
        }
    }
}

该函数每次在具有所有浏览器和 Android 设备的所有桌面操作系统上handleScroll捕获事件。@scroll.native

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

我努力了：

• 用不同的方法锁定它后面的组件和body
• -webkit-overflow-scrolling从应用程序中删除所有其他实例
• 实施https://github.com/willmcpo/body-scroll-lock
• 各种层次结构 + css 更改组合，涉及overflow-y和-webkit-overflow-scrolling

标签： javascripthtmlcssvue.jsscroll

Answer 1

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