Top direction is not working as intended

[muhammad-sayed-mahdy]

I'm making a messaging app like whatsapp, I used infinite loading to load a conversation messages, when selecting a conversation it's supposed to view from the last message and scroll up to view more, to do this I used

<div class="d-flex flex-column-reverse">
  <!-- load the messages -->
</div>

this makes the scroll start from the bottom
if I put the infinite-loading component after the messages it keeps loading even without scrolling
if I put it at the top before the messages it will appear at the bottom and will also keeps loading
if I make a parent div and put the infinite-loading before the messages div as a sibling and put direction=top it works fine, but when selecting a conversation, the scroll bar starts from the top making the component load once, while it's supposed to start from the bottom and not load messages till I scroll up.

[muhammad-sayed-mahdy]

I think it can be solved by adding a new direction reverse-top for example, and add the infinite element under the list (it will appear at the top) and add the below to the getCurrentDistance() function

else if (this.direction === 'reverse-top') {
        const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top;
        const scrollElmOffsetTopFromBottom = this.scrollParent === window
          ? window.innerHeight
          : this.scrollParent.getBoundingClientRect().top;

        distance = scrollElmOffsetTopFromBottom - infiniteElmOffsetTopFromBottom;

what do you think ? @PeachScript