I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using my mouse or finger on mobile while positioned on this fixed element, the container does not allow me to scroll down further.
Below is the code snippet for my component:
<template>
<div class="flex flex-col">
<div id="weatherIcon" class="flex justify-end relative overflow-hidden h-1/3">
<img class="absolute cover-enter-active max-h-full" :src="props.weather.cover" alt="Weather cover" />
</div>
<div id="texts" class="flex-col flex texts-enter-active pl-5">
<div id="temperature">
<p class="font-bold">{{ Math.round(props.temperature) }}°</p>
</div>
<div class="flex items-center" id="weatherDescription">
<img :src="props.weather.icon" alt="Rain" />
<p class="ml-1 font-light text-base">{{ props.weather.credo }}</p>
</div>
<div id="city">
<p class="font-bold">{{ props.city }}</p>
</div>
<div id="cityDescription" class="py-5">
<p class="font-light pr-5">{{ props.description.length > 150 ? props.description.slice(0, 150) : props.description }}... <a v-if="props.wikiLink" :href="props.wikiLink" class="font-bold" :style="{ color: weather.moreFont }">en savoir plus</a></p>
</div>
</div>
<div ref="swipeElement" id="swipe" class="mt-auto mb-6 fixed bottom-0 w-full">
<div id="baseSwap" class="flex flex-col font-bold items-center swipe-enter-active w-full">
<p>Glisser pour voyager</p>
<img :src="swipe" alt="Swipe icon" class="swipe opacity-80"/>
</div>
</div>
</div>
</template>