Angular 如何调试正在滚动的div或组件？ 修正问题

我很难识别哪个组件是以角度滚动的，也无法使用预兆调试工具

我有以下组件结构

Structure
|- main.ts
|- index.html
|- app
|-  |- app.module.ts
|-  |- app.components.ts
|-  |- app.components.html
|-  |- comp1
|-  |-  |- app.comp1.ts
|-  |-  |- app.comp1.html
|-  |-  |- comp2
|-  |-  |-  |-  
|-  |-  |-  |- app.comp2.ts
|-  |-  |-  |- app.comp2.html

我采取的步骤

已尝试实现窗口访问器服务。调用

this.window.window.scrollTo（0,0）

方法似乎没有帮助。y位置显示为0。所以我认为现在需要调整的是窗口。 正在滚动的窗口

在组件1ts中，我添加了名为scrollTop的局部变量，然后 在组件1 html中，我慢慢地开始添加[scrollTop]=“scrollTop” 对于每个div.重置点击按钮，我会尝试调用 scrollTop=0以向上滚动。没有解决它

然后我假设它可能在应用程序或组件2中。所以我加了一个 eventemitter位于component1内部，并添加了一个事件侦听器，现在 在同一个*上，重置点击按钮**将调用中的类似功能 这两个部分。我还和当地人重复了这个过程 scrollTop变量，并缓慢附加到两个 组成部分

我不知道接下来该怎么办

先前询问 我尝试实现一个为窗口提供访问器的服务

但无论我在页面上向下滚动多远，它似乎总是认为它位于0位置

这就是css的设置方式 这就是html的设置方式

---

一种额外的调试方法涉及以下内容：

右键单击并检查可滚动的内容。 在控制台中键入

$0。scrollTop

，如果返回的值为0，则继续传播到更高的层

最终发现它是隐藏在材料2的侧导航栏中的一个div

然后在控制器端。（component.ts）我添加了一行用于选择cdk scrollable，并将其scrollTop指定为0（在我的reset to top事件侦听器函数中）

---

包括与问题相关的代码。如何访问DOM详细信息？您试图在哪里滚动到顶部？我们需要一个最小的、完整的、可验证的示例：问题很可能是滚动的不是窗口，而是您正在检查窗口上的滚动位置。检查正在滚动的div上的滚动位置

md-sidenav-container {
  height: 100%;
  position:fixed;
}
md-sidenav {
  width: 300px;
  background: white;
}
md-sidenav mat-sidenav {
  height: 100%;
}
html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;

  transform: initial !important;
}

<md-sidenav-container>
  <md-sidenav #sidenav
              mode="over"
              align="end"
              opened="false">
    <md-list>
      <!-- Side Nav -->
      <div id="topNav">
        <p> Filter By </p>
        <div *ngFor="let filterType of scrollByTypes; let i = index" >
          <md-divider></md-divider>
        </div>
      </div>
    </md-list>
  </md-sidenav>

  <!--Primary Content      -->
<div id="recipesContent">


    <!--The ideal all recipes one page approach-->
    <div *ngIf="main">
        <div *ngFor="let item of items">
          <p> {{item}} </p>
    </div>
    <app-component2 *ngIf="page"></app-component2>

</md-sidenav-container>

"@angular/animations": "^4.1.3",
"@angular/cli": "^1.2.0",
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/compiler-cli": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/material": "^2.0.0-beta.7",

document.querySelector('[cdk-scrollable]').scrollTop = 0;