实现双向无限滚动答案

【问题标题】：Implement infinite scroll in both directions实现双向无限滚动
【发布时间】：2020-01-28 20:57:22
【问题描述】：

我目前正在尝试在两个方向上实现水平滚动。到目前为止，只有一侧在工作，即右侧。

我的方法是在滚动靠近文档的clientHeight 时推送显示的数组。如何为另一个方向实现相同的行为？

@HostListener('window:scroll', [])
  scroll() {
    if (isPlatformBrowser(this.platformId)) {
      const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      this.translateX = (scroll / 2) * -1;
      const height = document.querySelector('.hidden-container').clientHeight;
      const pos = scroll + document.documentElement.clientHeight;
      if (pos > height - 100 && pos < height + 100) {
        this.cases.push(...this.c);
      }
    }
}

仅供参考，它不是用于异步加载数据。它是一个作品集，无论用户滚动哪个方向，案例都会无限重复！

【问题讨论】：

为什么左边有东西？当然，您从第一个文档开始，然后在右侧结束时加载更多文档。如果不是这样的话，用户体验会很糟糕
@Pete 它不是用于异步加载数据。是一个作品集，不管用户往哪个方向滚动都会重复这个case！
您的描述似乎是错误的 - 这不会是无限滚动，更像是滑块/旋转木马。如果你只是一遍又一遍地循环相同的东西，那么根据你走的路，你只需将第一个/最后一个元素附加/前置到容器中

标签： html css angular typescript

【解决方案1】：

当我们无法将所有内容都放在单个页面上时，滚动是一种数据显示的实现。由于无法将所有内容都放在计算机屏幕上（Twitter、Facebook 提要等），大多数网站通常都以这种方式实现。问题：

【讨论】：