Angular 2+中的浮动水平滚动条

Question

在Angular 6中，我有一张宽而长的桌子。问题是水平滚动，用户需要转到表格的底部才能访问滚动。

我想实现一个浮动的水平滚动条，当查看表格时该浮动的水平滚动条。我遇到了使用Jquery的这些解决方案，但是却难以在Angular 6（或5,4,3等）中实现。有没有人对此有解决方案，或者可以帮助我解决如何在Angular中实现？非常感谢。

Demo

JQUERY Plugin

Jquery Solution - StackOverflow

Answer 1

解决方案1：如果您想将 jQuery 与 Angular 结合使用，则可以先添加 jQuery 和 floatingScroll plugin 到angular.json

中的"scripts": [...]文件

使用 jQuery
TS

....
declare let $: any;    // you can use "jQuery" keyword instead of "$"

@component({
  selector: '...',
  templateUrl: ['...'],
  styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {

  constructor(private eleRef: ElementRef) {}

  ngOnInit() {
    $(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
  }
}

当您使用$(this.eleRef.nativeElement)获得component域的树根时，然后.find('yourTableSelector')获得您想要的element。< / p>

解决方案2：，还有另一种库可以实现浮动滚动条或自定义滚动条，其中之一是ngx-perfect-scrollbar我使用它，它为您提供了很好的功能来处理滚动并跟踪其行为吧... ...您可以选择允许 vertical 或 horizo​​ntal 滚动条以及一些css，例如position: fixed和{{1} }功能来显示或隐藏滚动条（如果在表中可见），可以实现所需的功能。