Question

我有一个问题，困扰我一段时间。

假设我有几个div垂直堆叠。我们说我有5个。我想要的是重复5 div次（与CSS，background-repeat:repeat-y一样）。

这个网站有我的意思：https://duroc.ma。您可以拖动页面，内容似乎无休止地重复。虽然它位于x和y方向，但我只希望y方向执行此操作并且能够scroll而不是{{1} }}

现在，我知道可以使用dragging完成此操作，因此可以选择此类别。我一直在寻找年龄，但我找到的只是＆＃39; jQuery＆＃39;原则，意味着您可以继续向下滚动以查找新内容，而不是转到下一页。

有人可以告诉我我需要做什么吗？或者至少是一个让我朝着正确方向前进的起点？

谢谢！干杯

Answer 1

尝试使用JavaScript的解决方案。我的示例仅适用于向下滚动，如果需要，您可以通过向上滚动轻松更新它。

this._myservice.myservice(this.taskdesc).subscribe(data => {

var newdata = data.map(function(obj){

  var a = {};

  a.TASKDESC = obj.TASKDESC;
  a.ENTUSR = obj.ENTUSR;
  a.ENTDT = new Date(obj.ENTDT).toISOString()

  return a;

});


this.displayList = newdata;


})

var parent = document.querySelector('.parent');

parent.addEventListener('scroll', endlessScroll);

function endlessScroll() {
  var height = 0;
  for (var i = 0; i < parent.children.length; i++) {
    height += parent.children[i].clientHeight;
  }
  var firstChild = parent.firstElementChild;
  if (parent.scrollTop >= height - parent.clientHeight) {
    parent.appendChild(firstChild);
    parent.scrollTop -= firstChild.clientHeight;
  }
}

.parent {
  height: 300px;
  overflow: auto;
  width: 100%;
}

.parent div {
  height: 150px;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: green;
}

更新：现在它适用于所有浏览器。

无限的x重复和无限的页面滚动

1 个答案: