Can't implement infinite data load with this scroll

[kundan-kumar1993]

Hello, I've implemented this scroll in my grid table and now I want to implement infinite scroll with this as well using the same container, it seems not possible so far as onscroll event not getting fire on malihu scrolling. Please anyone suggest me how I can do that? Thanks in advance!

Regards, Kundan

[jfcere]

Hi @kundan-kumar1993,

Although I did not try it, you can probably use the callbacks property in the scrollbarOptions input binding with onTotalScroll (see callbacks documentation and definitlytyped definition)

html

<div malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>

typescript

public scrollbarOptions = {
  axis: 'y',
  theme: 'minimal-dark',
  callbacks: {
    onTotalScroll: () => {
      // load new data
    }
  }
};

Note that you might have to update the scrollbar to resize it once the new items have been added to your container with MalihuScrollbarService.update but this is all hypothetical.

[kundan-kumar1993]

Hi jfcere,

Thanks for your reply.

I have already seen this callback method but I want this method to trigger prior 10% of total data scrolled in other words if I have 100 rows so it should trigger of 80th record number.

To achieve these kinds of requirement I'm using InfiniteScroll v0.8.2 package which provides me properties like - infiniteScrollDistance, infiniteScrollUpDistance, infiniteScrollThrottle etc., see this plnkr https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview but this seems not working with our scrollbar. Could you help me to implement this or suggest any alternatives, thanks in advance!

Regards, Kundan

[jfcere]

Thx for the plunker, give me some time to take a look at it and i'll come back to you... hopefully we'll get a way to make it work!

[kundan-kumar1993]

Hi Jfcere,

Hope you are having a great day so far! Did you get chance to look into this? I have been waiting for your reply.

Regards, Kundan

[jfcere]

@kundan-kumar1993 sorry I didn't 😞 I am at work today but i'll take the time tonight.

[kundan-kumar1993]

Hi @jfcere Further to above, I did some try to implement the design for default scroll of browsers but it seems only chrome providing webkits with which we can modify the design of scroll so if we say practically its not possible to target all available browsers, I have to use ngx-malihu-scrollbar.

How to achieve our requirement (this would be your feature enhancement as well) - we can implement another version of onTotalScroll where *we can provide the bottom percentage point of the scroll nob relatively to the scroll container (i.e, 2 (2 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled).**

Also, this property should be that much smart which track when I finish with my data append on bottom of the page, in other words - If I have 100 records and loading 50 records at a time soon very first load of page scroll will fire the callback for other 50 records and when it append those records and become 100 after that event should not fire on bottom scroll.

Hope I am clear for you, anyway let me know if I can help you somehow?

Regards, Kundan

[kundan-kumar1993]

Hi @jfcere Hope you are having a great day so far! I have been waiting for your response.

[jfcere]

Hi @kundan-kumar1993,

Sorry for the delay, I took some time yesterday to look at it and so far it is not working but here is what I discovered along the way.

There is an issue on original Malihu-Cutom-Scrollbar-Plugin on the fact that it cannot work with an infinite scroll plugin, you have to do it with the callbacks functions from the plugin (see reference: https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/57).

So I tried it with this Plunker based on the previous issue recommendations. But so far I've been able to update the array when I get to the bottom of the scrolling element but the UI is not updating so we do not see the new items being rendered.

I did not have more time for now to try to make it work but I can get back to it this weekend.

[kundan-kumar1993]

Hi @jfcere Firstly thanks for your kind reply I have done some implementation using callbacks but still facing some issues (my UI not getting update), see Issue

Could you please look into this and let me know where I am doing wrong? Thanks in advance!

[poonga]

Hi @jfcere ,

I'm facing the same issue in Angular12. This plugin is most helpful in my project. Can you please Look into this?