1

我正在使用 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.
        }
    }
});
4

3 回答 3

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

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

让我知道它是否有效:)

于 2016-10-17T21:17:33.133 回答
0

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

  1. 在加载新数据之前（假设您使用 jquery load/post）获取您的第一个，最顶部的条目（评论、图片等）作为对象“YourObject”（以您喜欢的方式命名）

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

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

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

于 2016-08-05T15:44:06.083 回答
0

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

它要求项目大小是固定的，您事先计算“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);
于 2017-05-06T09:26:50.860 回答