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

【问题标题】：Div within a modal isn't always firing scroll events on iOS模态中的 Div 并不总是在 iOS 上触发滚动事件
【发布时间】：2020-10-01 17:10:04
【问题描述】：

我在应用程序中的 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
各种层次结构+css变化组合涉及overflow-y和-webkit-overflow-scrolling

【问题讨论】：

标签： javascript html css vue.js scroll

【解决方案1】：

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

【讨论】：