When you’re loading older messages, the scroll position keeps jumping around unexpectedly. It’s super annoying because you might be reading a message, and suddenly the screen shifts, making you lose your place. This is happening because of how Ionic handles scroll events and content updates in the ion-content component.ion in detail and share your code, configuration, and other relevant info.
-
When loading older messages (scrolling up), the scroll position isn’t being maintained properly
-
The scroll behavior isn’t smooth and feels jumpy
We’ve tried several approaches:
-
Using virtual scrolling (didn’t work well with your setup)
-
Adjusting scroll positions manually (caused some glitches)
-
Modifying the content structure (still had issues)
a small code piece =>
<div
v-observe-visibility="{
callback: onVisibilityChange,
intersection: {
root: null,
// Üstten 300px önce tetiklensin
rootMargin: '300px 0px 0px 0px',
// Daha hassas tetikleme için
threshold: [0.1, 0.2, 0.3]
}
}"
class="load-trigger"
></div>
<template v-for="(message, index) in chatList" :key="'ee-' + index">
<!-- From messages (sent by current user) -->
<ion-item v-if="message._from === myUserInfo.user_code" class="msg-info clearfix msg-from" lines="none">
<!-- Direct messages -->
<ion-label v-if="message.offer_detail?.offer_type === 'direct_message'" class="ion-text-wrap">
<chat-text-area :text="message.offer_detail.message" class="float-right" origin="from" />
</ion-label>
<!-- Buy product offers -->
<ion-label v-else-if="message.offer_detail?.offer_type === 'buy-product'" class="ion-text-wrap">
<buy-offer-request-card :message="message" origin="from">
<div class="accept-refuse-buttons accept-refuse-buttons-1">
<ion-button
:disabled="isProcessing"
expand="full"
@click="sendOfferResponse({ offerType: 'new_offer', productMessage: message })"
>
Yeni Teklif Ver
</ion-button>
<ion-button
:disabled="isProcessing"
expand="full"
@click="sendOfferResponse({ offerType: 'cancel_offer', productMessage: message })"
>
Teklifi İptal Et
</ion-button>
</div>
</buy-offer-request-card>
</ion-label>
<!-- Other offers/messages with images -->
<ion-label v-else class="ion-text-wrap">
<chat-offer-request-card
:message="message"
:price="message.offer_detail.price"
origin="from"
@compare-products="compareProducts"
>
<div class="accept-refuse-buttons accept-refuse-buttons-1">
<ion-button
:disabled="isProcessing"
expand="full"
@click="sendOfferResponse({ offerType: 'new_offer', productMessage: message })"
>
Yeni Teklif Ver
</ion-button>
<ion-button
:disabled="isProcessing"
expand="full"
@click="sendOfferResponse({ offerType: 'cancel_offer', productMessage: message })"
>
Teklifi İptal Et
</ion-button>
</div>
</chat-offer-request-card>
</ion-label>
</ion-item>
2 posts - 2 participants