search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

Infinite scroll functionality #515

Closed GerardoTovar closed 9 months ago

GerardoTovar commented 1 year ago

Feature Description

is there a way to enable this behavior of this css property overflow-anchor

Use Case

Most of the chats when you scroll up and reach the top. This loads more messages and the scroll does not move, it stays at the same height of the view

I thought about using ngx-infinite-scroll but currently it doesn't work in angular 16

A temporary fix was to add an id to chat messages and when loading new messages quickly do a scrollIntoView. but this makes a little flicker

I found a closed issue from 2020 asking for this functionality #306

Thank you very much for your time

hakimio commented 1 year ago

Can't you just use custom scrollViewport for this?

MurhafSousli commented 9 months ago

Infinite scroll is outside the scope of the plugin, but you can apply the behavior on the viewport using CSS

Another way is using updated output, whenever content size change, call scroll to bottom

<ng-scrollbar #scrollbarRef="ngScrollbar"
              (updated)="scrollbarRef.scrollTo({ bottom: 0, duration: 200 })">
   ...
</ng-scrollbar>