永无止境的滚动，双向克隆项目

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

示例从滚动条居中开始。因此，它应该在到达任一端之前克隆原始元素。我不确定性能，只克隆而不删除它会更好吗？也可能只克隆到接近末端的那一侧。

cloneTimeslinesright（）的工作原理与我想的差不多，

cloneTimelinesleft（）; 有一个问题，一旦克隆，滚动位置就不会像右侧那样受到影响，因此条件始终保持为真，并且向过多的克隆发送垃圾邮件。

Answer 1

当您在滚动条位置之后（右侧）追加时，滚动条位置不会更改，并且当前滚动条位置下方会出现额外的滚动空间。

当您在滚动条位置之前（左侧）添加前缀时，现有内容会被向下推，并且滚动条会向上移动。

这是标准的浏览器行为，因为从用户体验的角度来看，将内容前置到顶部表示信息的重要性更高（例如， Facebook 墙上的最新更新），并且它取代了下面的内容，而附加到底部表示信息的重要性更高。添加不太重要的内容，并被上面的内容取代。

在执行cloneTimelinesleft()之后，您可以通过手动向右滚动（宽度等于您添加的内容的宽度）来覆盖此设置

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