Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Top direction is not working as intended #322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
muhammad-sayed-mahdy opened this issue Jan 9, 2022 · 1 comment
Open

Top direction is not working as intended #322

muhammad-sayed-mahdy opened this issue Jan 9, 2022 · 1 comment

Comments

@muhammad-sayed-mahdy
Copy link

muhammad-sayed-mahdy commented Jan 9, 2022 •
edited
Loading

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@muhammad-sayed-mahdy