mCustomScrollbar预先添加新内容

Question

我使用的是mCustomScrollbar，我试图在滚动的顶部和底部动态加载内容(当然，不是同一时间)。

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

当附加内容时，它的效果非常棒，滚动条将停留在正确的位置(您滚动到的位置，并将自动更改滚动条位置，以便您可以继续向下滚动以查看新内容)。

但是，当您预先添加内容(将其放在滚动条的顶部)，并且用户向上滚动时，内容将加载，但滚动条将被强制上移到顶部。我希望这与在底部追加内容时的工作方式完全相同:让用户向上滚动查看新内容。

$(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.
        }
    }
});

Answer 1

如果它仍然是相关的，我的解决方案是：

1. 在加载新数据之前(假设你使用jquery load/post)获取你的第一个，最上面的条目(评论，图片等)作为对象'YourObject‘(按您喜欢的方式命名)
2. 加载新内容后，请使用以下代码行

$(选择器) {scrollInertia:0}); (“scrollTo”，YourObject，.mCustomScrollbar

它有点闪烁，但目前这是实现它的唯一方法。

Answer 2

$(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;
    }
});

我不确定它是否有效，因为我真的没有时间列出在顶部和底部呈现对象的列表，但如果它有效，那就太好了！

如果工作正常，请告诉我:)

Answer 3

我以下面的解决方案结束，由于闪烁，这个解决方案并不完美。

它要求项目大小是固定的，预先计算"itemsPerRow“，并且(最好)预先预留整行

我的内容是由执行异步调用的angular指令生成的。也许这就是闪烁的原因。

我想我将不得不再次钻研malihu代码以找到更好的方法。

          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);