In my Vue component within the application, I have set up a hierarchy with various styles:
<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;
}
}
}
The function handleScroll is designed to capture the @scroll.native event consistently on all desktop operating systems and Android devices.
However, there is an issue with iOS devices where the @scroll.native event does not always fire, resulting in unreliable scrolling behavior.
I've attempted various solutions such as:
- Restricting scroll on the component and body using different techniques
- Removing other occurrences of
-webkit-overflow-scrollingfrom the app - Implementing https://github.com/willmcpo/body-scroll-lock
- Trying different combinations of hierarchy and css changes involving
overflow-yand-webkit-overflow-scrolling