Question

我试图在包含大表的div顶部添加另一个滚动条。我不得不从这里到那里一块一块地解决它。这是我在vanillaJS / Angular中实际运行的解决方案：

scroll() {
    let scroller = document.querySelector('.above-scroller');
    let table = document.querySelector('.table');
    table.scrollTo(scroller.scrollLeft,0);
  }

HTML：

<div class="above-scroller" (scroll)="scroll()">
  <div class="scroller"></div>
</div>
<div class="table" >
  <table></table>
</div>

CSS：

.above-scroller  {
   overflow-x: scroll;
   overflow-y:hidden;
   height: 20px;
   width: 1200px
 }

.scroller {
  width:4500px;
  height: 20px;
}

.table {
  width:100%;
  height: 100%;
  overflow: auto;
}

Answer 1

适当的Angular 2+解决方案是使用＃符号标记div并使用ViewChild引用它们：

HTML

<div class="above-scroller" #scroller (scroll)="scroll()">
  <div class="scroller"></div>
</div>
<div class="table" #table >
  <table></table>
</div>

角度组件：

@ViewChild('scroller') scroller: ElementRef; 
@ViewChild('table') table: ElementRef;

this.table.nativeElement.scrollTo(this.scroller.nativeElement.scrollLeft,0)

Answer 2

我有点受到@JakubBares想法的启发，我的解决方案如下：

HTML：

    <div class="topScrollbar" #topScrollBar><div [style.width]="topScrollbarWidth"></div></div>
    <div #regularScrollBar>
     //   My original content which with scrollbar
    </div

打字稿：
使用@ViewChild可以轻松访问元素

@ViewChild('topScrollBar') topScrollBar: ElementRef;
@ViewChild('regularScrollBar') regularScrollBar: ElementRef;

一旦页面被加载，您可以调用方法calculateTopScrollBar。每当我们使用顶部或底部滚动条滚动时，该方法都会使用来计算初始滚动条并添加侦听器以进行相同操作

private calculate(): void {
    setTimeout(() => this.topScrollbarWidth = this.regularScrollBar.nativeElement.scrollWidth + 'px', 0);

    this.regularScrollBar.nativeElement.addEventListener('scroll', () => {
        if (this.showScrollBar()) {
            this.topScrollbarWidth = this.regularScrollBar.nativeElement.scrollWidth + 'px';
            this.topScrollBar.nativeElement.scrollLeft = this.regularScrollBar.nativeElement.scrollLeft;
        }
    });

    this.topScrollBar.nativeElement.addEventListener('scroll', () => {
        if (this.showScrollBar()) {
            this.topScrollbarWidth = this.regularScrollBar.nativeElement.scrollWidth + 'px';
            this.regularScrollBar.nativeElement.scrollLeft = this.topScrollBar.nativeElement.scrollLeft;
        }
    });
}

private showScrollBar(): boolean {
    return this.regularScrollBar.nativeElement.scrollWidth > this.regularScrollBar.nativeElement.offsetWidth;
}

别忘了清理：

public ngOnDestroy(): void {
    this.regularScrollBar.nativeElement.removeAllListeners();
    this.topScrollBar.nativeElement.removeAllListeners();
}

如何在Angular 2 +中添加第二个滚动条？

2 个答案: