Question

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

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

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

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

dish_quant <- df_final %>%
              group_by(dish_name) %>%
              summarize(Dish_Quantity=sum(dish_quantity)) %>%
              arrange(desc(Dish_Quantity))

        dish_name           Dish_Quantity
           (fctr)              (int)
 1       Chicken Kadai            11
 2     Chicken Biryani             9
 3         Dal Makhani             6
 4 Sai Bhaji and Pulav             3
 5          Tava Pulav             3
 6          Total Meal             3
 7       Chicken Kabab             2

Answer 1

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

在加载新数据之前（假设您使用jquery加载/发布）获取您的第一个，最顶部的条目（注释，图片等）作为对象'YourObject'（将其命名为您喜欢的方式）
加载新内容后，请使用以下行

$（选择器）.mCustomScrollbar（ “scrollTo”，YourObject，{scrollInertia：0}）;

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

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

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

它要求项目大小是固定的，您需要计算＆＃34; itemsPerRow＆＃34;事先，并且（最好）你预先填满整行

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

我必须再次挖掘马里胡代码以找到更好的方法。

          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预先添加新内容

3 个答案: