單擊按鈕打開 ngx-flyout 后，如何自動滾動到 angular8 中的特定 div？

Question

假設我有一個大小為 200px 寬度和高度的小 div，溢出：y 使用 ngx-flyout： https ://www.npmjs.com/package/ngx-flyout

我有以下 HTML，正文中有重要文本：

我的彈出 html 是：

<ngx-flyout [(open)]="openFlyout">
<div style="width:200px;height:200px;overflow-y:true">
<div id="A">Lorem ipsum..... </div>
<div id="B">Lorem ipsum..... </div>
<div id="C">Lorem ipsum..... </div>
<div id="D">Lorem ipsum..... </div>
<div id="E">Lorem ipsum..... </div>
</ngx-flyout>

<button (click)="toggleTopbar('X')">
    Toggle Flyout
</button>

我想這樣做，當我單擊“切換彈出按鈕”時，它會從頂部打開彈出按鈕，並假定它是一個較短的高度（200 像素），它會滾動到字母所在的特定 div。 例如，如果它是 toggleTopbar('X')，它應該滾動到 div 'X' 所在的位置，而不是讓用戶手動滾動 div A 到 W 來到達它。

如何使用我的 toggleTopbar 功能完成此操作？ 我正在使用 angular8。

Answer 1

首先，您需要計算 UI 大小，然后可以根據提供的值使用它來滾動 div。

我已經使用ViewChild計算了這些值，每當使用單擊按鈕時，該函數都會使用這些值來計算要滾動多少。

演示

<button (click)="toggleSidebar('Z')">
  Toggle Flyout Z
</button>

<ngx-flyout [(open)]="openFlyout">
    <div #innerList style="width:200px;height:200px;overflow-y: scroll;">
        <div id="A">Lorem ipsum...A</div>
        <div id="B">Lorem ipsum...B</div>
        <div id="C">Lorem ipsum...C</div>
        ...
        ...
        <div id="X">Lorem ipsum...X</div>
        <div id="Y">Lorem ipsum...Y</div>
        <div id="Z">Lorem ipsum...Z</div>
    </div>
</ngx-flyout>

export class AppComponent {
  name = "Angular";
  // get div from ngx-flyout
  @ViewChild("innerList", { static: false }) innerList: ElementRef;

  uiData = {
    innerDivHeight: 0,
    parentDivHeight: 0,
    noOfChildrenInParentDiv: 0,
    noOfChildrenInTotal: 0
  };

  openFlyout: boolean = false;

  ngAfterViewInit() {
    // get height of parent div
    this.uiData.parentDivHeight = this.innerList.nativeElement.clientHeight;
    // get height of div inside the parent div
    this.uiData.innerDivHeight = this.innerList.nativeElement.firstChild.clientHeight;
    // get number of elements visible in parent div
    this.uiData.noOfChildrenInParentDiv = Math.floor(
      this.uiData.parentDivHeight / this.uiData.innerDivHeight
    );
    // get total number of children present in parent div
    this.uiData.noOfChildrenInTotal = this.innerList.nativeElement.children.length;
  }

  toggleSidebar(id: string) {
    // get index of div (converted ASCII to number, you can use numbers here directly)
    // in case of numbers there is no need of following conversion
    let index = id.charCodeAt(0) - 65 + 1;
    this.openFlyout = !this.openFlyout;

    // if index is out of view of current visible children
    if (index > this.uiData.noOfChildrenInParentDiv) {
      const scrollPos = (this.uiData.innerDivHeight * (index - this.uiData.noOfChildrenInParentDiv));
      this.innerList.nativeElement.scrollTop = scrollPos;
    }
    // else reset scroll
    else {
      this.innerList.nativeElement.scrollTop = 0;
    }
  }
}

Answer 2

<ngx-flyout [(open)]="openFlyout">
 <div style="width:200px;height:200px;overflow:y;">
 <div id="idA">Lorem ipsum</div>
 <div id="idB">Lorem ipsum</div>
 <div id="idC">Lorem ipsum</div>
 <div id="idD">Lorem ipsum</div>
 <div id="idE">Lorem ipsum</div>
 </ngx-flyout>

<a href="#idD">Toggle Flyout</a>

如果需要，使用 css 切換按鈕元素並使其看起來像按鈕。