mCustomScrollbar prepend new content

Question

I am using mCustomScrollbar and I am trying to dynamically load content on top and bottom of the scroll (of course, not the same time).

http://manos.malihu.gr/jquery-custom-content-scroller/

When appending content it works awesome, the scroll will stay in the correct position (the position you scrolled to, and will automatically change the scroll bar position so that you can continue to scroll down to see the new content).

However, when you prepend content (place it on top in the scrollbar), and the user scrolls up, the content will load but the scrollbar will be forced to move up to the top. I want this to work exactly the same way as when appending content on the bottom: let the user scroll up to see the new content.

$(selector).mCustomScrollbar({
    mouseWheel: { 
        scrollAmount: 500,
        preventDefault: true
    },
    callbacks: {
        advanced: {
            updateOnContentResize: true
        },
        onScroll: function() { 
            // this.mcs.topPct contains the current scroll position (when scroll animation is completed.
            // it can be between 0-100, where 100 is bottom and 0 is top
            //
            // my scroll starts on the bottom, and when this.mcs.topPct is 0
            // I load dynamic content and place it on the very top of all content
            // this causes the scroll to display this content immediately,
            // and I would like the user to manually scroll up to see the added content.
        }
    }
});

score 0 · Answer 1 · answered Aug 05 '16 at 15:44

if it's still relevant, my solution is:

Before loading new data (assuming you use jquery load/post) get your first ,the top most entry (comment,picture etc.) as an object 'YourObject' (name it how you like it)
Once you load new content use the following line

$(selector).mCustomScrollbar("scrollTo",YourObject,{scrollInertia:0});

It flickers a bit, but at the moment that's about the only way to achieve it.

score 0 · Answer 2 · 2016-10-17T22:02:00.473

$(selector).mCustomScrollbar({
mouseWheel: { 
    scrollAmount: 500,
    preventDefault: true
},
callbacks: {
    advanced: {
        updateOnContentResize: true
    },
    onBeforeUpdate:function(){
        this.totalScroll = this.mcs.topPct.slice(0);
    },
    onUpdate:function(){
        this.mcs.topPct = this.totalScroll;
    }
});

Not sure if it works because I don't really have time to make a list that renders objects both on the top and bottom, but if it works then great!

Let me know if it works :)

score 0 · Answer 3 · answered May 06 '17 at 09:26

I ended with the solution below which is not perfect because of flickering.

It requires that the item size is fixed, that you compute "itemsPerRow" beforehand, and (preferably) that you prepend full rows

My content is generated by angular directives doing asynchronous calls. Maybe it is the cause of the flickering.

I'll have to dig again into malihu code to find a better way I guess.

          var container=$('.mCustomScrollbar');
          var mcs=container[0].mcs;

          if (mcs.direction=='y') {
            var offset=Math.round(items.length/itemsPerRow)*itemHeight;

          } else {
            var offset=items.length*itemWidth;
          }

          var side={x: 'left', y: 'top'};
          var pos=mcs[side[mcs.direction]];

          var scrollOptions={scrollInertia: 0};
          container.mCustomScrollbar('scrollTo', pos-offset, scrollOptions);

mCustomScrollbar prepend new content

3 Answers3