Javascript mCustomScrollbar预编新内容

我使用的是mCustomScrollbar，我试图在滚动条的顶部和底部动态加载内容（当然，不是同时加载）

添加内容时，滚动条将保持在正确的位置（您滚动到的位置，并将自动更改滚动条的位置，以便您可以继续向下滚动以查看新内容）

但是，当您预先添加内容（将其放在滚动条的顶部）并且用户向上滚动时，将加载内容，但滚动条将被迫向上移动到顶部。我希望它的工作方式与在底部添加内容时完全相同：让用户向上滚动以查看新内容

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

---

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

在加载新数据之前（假设您使用jquery load/post），将第一个、最上面的条目（注释、图片等）作为对象“YourObject”（根据您的喜好命名）

加载新内容后，请使用以下行

$（选择器）.mCustomScrollbar（“scrollTo”，您的对象，{scrollInertia:0}）

---

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

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

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

在加载新数据之前（假设您使用jquery load/post），将第一个、最上面的条目（注释、图片等）作为对象“YourObject”（根据您的喜好命名）

加载新内容后，请使用以下行

$（选择器）.mCustomScrollbar（“scrollTo”，您的对象，{scrollInertia:0}）

它有点忽隐忽现，但目前这是实现它的唯一途径

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

我不确定它是否有效，因为我没有时间制作一个列表来呈现顶部和底部的对象，但是如果它有效，那就太好了

让我知道它是否有效：）

我不确定它是否有效，因为我没有时间制作一个列表来呈现顶部和底部的对象，但是如果它有效，那就太好了

---

让我知道它是否有效：）

我以下面的解决方案结束，该解决方案由于闪烁而不完美

它要求项目大小是固定的，需要事先计算“itemsPerRow”，并且（最好）需要预先处理整行

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

我必须再次深入研究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);

---

我以下面的解决方案结束，该解决方案由于闪烁而不完美

它要求项目大小是固定的，需要事先计算“itemsPerRow”，并且（最好）需要预先处理整行

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

我必须再次深入研究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);