Question

我正在尝试实现this kind of scroll.，换句话说，当用户停止滚动时，它的速度变慢，平滑得多，并且逐渐消失。我知道通过使用translate3d和固定容器创建伪滚动可以达到这种效果。

这样做，我的方法是设置身体高度afterViewInit并根据y更改translate3d的{{1}}值。这样可以使滚动工作，但是绝对不会放慢速度，而是加速。

为减慢速度，我尝试将身体的高度乘以2，然后将滚动条除以2。这使滚动条减慢了速度，但在底部形成了一定的余量-距离平滑度还很远，并且淡出并不是现在也一样。

如何真正实现以上链接中给出的效果？大多数人都使用图书馆来实现这种行为吗？

pageYoffset

export class AppComponent implements OnInit, AfterViewInit {

  translateY = 0;

  constructor() {}

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      const ref = document.querySelector('.scrollable-container');
      const height = ref.clientHeight || ref.scrollHeight;
      document.body.style.height = height * 2 + 'px';
    });
  }

  @HostListener('window:scroll', [])
  scroll() {
    this.translateY = (pageYOffset / 2) * -1;
  }

}

如何使用translate3d实现平滑滚动

0 个答案: