永不结束滚动，克隆物品双方

Question

我希望能够无休止地滚动双方，这意味着它将在达到末端之前克隆元素。

示例：https://codepen.io/rkaiser/pen/wogmqn

  $('.timeline-container').on('scroll',function() {
      //columns = innerContent.length * 101; // multiply by column width
      console.log(this.scrollLeft)
      //console.log(columns + ' whole width');
      if (this.scrollLeft < 1000) {
        cloneTimelinesleft();
        console.log('test');
        $(this).off('scroll');
      } else if ( (this.scrollLeft + outerContent.outerWidth()) > (columns - 300)){
        innerContent = $('.timeline-container .timeline-years .year-column');
        columns = innerContent.length * 101; // multiply by column width;
        console.log(columns + ' whole width');
        cloneTimelinesright();
      }    
  });

示例从滚动条开始为中心。因此，它应该在到达两边之前克隆原始元素。我不确定性能，最好只克隆而不是删除吗？也可能仅克隆到即将结束的那一侧。

clonetimeslineslinerright（）正在工作我认为，

clonetimelinesleft（）; 有一个问题，一旦克隆，滚动的位置就不会像在右侧那样受到影响，因此条件始终保持真实并垃圾邮件。

pamm>

Answer 1

当您在之后附加（在右侧）位置时，滚动栏位置不会改变，并且在当前滚动栏位置下方可用额外的滚动空间。

当您在之前预先准备（在滚动栏的左侧）时，现有内容被推下，滚动栏向上移动。

这是标准的浏览器行为，因为从UX的角度来看，将内容预先为最重要的信息（例如，在Facebook Wall上喜欢A 最新更新），它取代了信息。下面的内容，添加到底部的同时表示添加不太重要的内容，而不太重要的内容被上面的内容所取代。

您可以通过向右侧手动滚动，宽度等于您添加的内容的宽度的宽度，然后再进行clonetimelinesleft（）

$('body').scrollLeft($(newClonedContent).outerWidth());

Answer 2

我没有修改您的克隆功能，因此滚动宽度会很快增长。

这是我的解决方案：

（更新：添加了左滚动计时器到"补丁"左滚动垃圾邮件）

var scrollLeftTime = 0;
var scrollLeftWait = 100;
$('.timeline-container').on('scroll', function() {
    var l = $(this).scrollLeft();
    var w = $(this).width();
    var m = $(this)[0].scrollWidth - w;
    console.log(l, m);
    if (l == 0) {
        var t = Date.now();
        if (t - scrollLeftTime > scrollLeftWait) {
            cloneTimelinesleft();
            scrollLeftTime = t;
        }
        $(this).scrollLeft(w);
    }
    if (l == m) {
        cloneTimelinesright();
    }
});

https://jsfiddle.net/2wcutgm7/

尝试简化过程。

我收集当前的scrollLeft和最大滚动量。然后，我只需测试该位置是0（左CLONE）还是MAX（右Clone）。

有必要在左克隆时撞到滚动位置，否则会停止。