单击按钮打开ngx-flyout后，如何自动滚动到角度8的特定div？答案

【问题标题】：How to auto scroll to a specific div in angular8 after clicking on a button to open an ngx-flyout?单击按钮打开ngx-flyout后，如何自动滚动到角度8的特定div？
【发布时间】：2019-12-12 23:00:42
【问题描述】：

假设我有一个大小为 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。

【问题讨论】：

标签： javascript css angular typescript

【解决方案1】：

首先您需要计算 UI 大小，然后可以根据提供的值使用它来滚动您的 div。

我已经使用ViewChild 计算了这些值，并且每当使用单击按钮时，该函数都会使用这些值来计算要滑多少。

Demo

<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;
    }
  }
}

【讨论】：

【解决方案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 切换按钮元素，使其看起来像一个按钮。

【讨论】：