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

Question

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

我想实现一个浮动水平滚动条，当表格处于视图中时，它会浮动水平滚动条。我使用 Jquery 遇到了这些解决方案，但很难在 Angular 6（或 5、4、3 等）中实现它。有谁有解决方案或者可以帮助我如何在 Angular 中实现？预先非常感谢。

演示

JQUERY 插件

Jquery 解决方案 - 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 dom 的

树根

，然后

.find('yourTableSelector')

获得您想要的

element

。

解决方案2：有替代库可以实现浮动滚动条或自定义滚动条，一般来说其中之一是ngx-perfect-scrollbar我使用它，它为您提供了很好的功能来处理滚动并跟踪他的行为看看它...您可以选择允许vertical或horizontal滚动条以及一些

css

，例如

position: fixed

和

javascript

功能，以显示或隐藏滚动条（如果表格在视图中或不在视图中），您可以实现你想要什么。

Answer 2

对于不需要其他 JS 库的浮动滚动条，您可以使用

handy-scroll

- https://www.npmjs.org/handy-scroll

使用方法如下：

npm install handy-scroll

然后在你的 Angular 文件中使用它：

组件.ts

import handyScroll from 'handy-scroll';

export abstract class Component implements OnInit, AfterViewInit, OnDestroy {

    @ViewChild('floatingScrollbar')
    private _floatingScrollbar: ElementRef;

    public ngOnDestroy(): void {
        if (!!this._floatingScrollbar && handyScroll.mounted(this._floatingScrollbar.nativeElement)) {
            handyScroll.destroy(this._floatingScrollbar.nativeElement);
        }
    }

    public ngAfterViewInit(): void {
        if (!!this._floatingScrollbar) {
            handyScroll.mount(this._floatingScrollbar.nativeElement);
        }
    }

}

组件.html

<div #floatingScrollbar>
    content with scrollbar
</div>