javascript - 永无止境的滚动，两侧克隆元素

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

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

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

这是标准的浏览器行为，因为从用户体验的 Angular 来看，将内容放在顶部表示信息的重要性更高(例如，最新更新，就像在您的 Facebook 墙上)并且它会取代它下面的内容，而附加到底部表示添加了不太重要的内容，这些内容被上面的内容所取代。

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

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