Infinite scrollbar and infinite-scroll plugin

[valapy]

hello malihu!

Im using your scrollbar to wrap a div that have lots of images inside, im using the infinite scroll plugin to load more and more images, but i can't make the infinitescroll from your plugin to "update" and load the images, i mean i don't how to implement it. I would love to have some help please :)

this is what i have from the infinite scroll plugin:

var $container = $("#apps_container"); $container.infinitescroll({ navSelector: '#page-nav', nextSelector: '#page-nav a', itemSelector: '.box', loading: { finishedMsg: 'Fin de carga' } }, function( newElements ) { $container.isotope( 'appended', $( newElements ) ); } );

[malihu]

Hello,

Infinite scroll plugin won't work with javascript scrollbars (only the browser native scrollbar).

You need to code an extra script and use custom scrollbar's available methods and callbacks to achieve the infinite scroll effect. I've made a fully working example here: http://manos.malihu.gr/tuts/custom-scrollbar-plugin/infinite_scroll_example.html

Make sure you also read "Detailed usage guide - Important notes" and "Configuration" sections in plugin's homepage (http://manos.malihu.gr/jquery-custom-content-scroller/).

[valapy]

Im actually following that example and i can't make it work with the other plugin :(

[kundan-kumar1993]

Hello @malihu,

My ngOnChanges not getting fire when I am using callback method so due to this my UI not getting update like -

`scrollbarOptions = {
        axis: 'yx',
        theme: 'light-3',
        setHeight: 433,
        autoHideScrollbar: false,
        scrollInertia: 0,
        callbacks: {
            onTotalScroll: () => {
                this.onScrollDown(this);

            },
            onTotalScrollOffset: 300,
            alwaysTriggerOffsets: false
        }
    };

    onScrollDown(ev) {
        console.log('scrolled down!!', ev);
        // add another 100 items
        const start = this.sum;
        this.sum += 1;
        this.onScroll.emit(this.sum);

        this.malihuScrollbarService.update;
    }`

my HTML is like - <section malihu-scrollbar [scrollbarOptions]="scrollbarOptions" class="content-panel flowable-table"></section>

Could you please provide me the source which you have implemented in your sample? or please suggest me the way which could work.