Chat scroll erro

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.

  1. When loading older messages (scrolling up), the scroll position isn’t being maintained properly

  2. 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>

My Ionic Vue app also has messaging with scrolling up to load more. I tried Ionic’s infinite scrolling but didn’t work well or at all for scrolling up. I ended up implementing my own using the IntersectionObserver directly.