如何调试滚动哪个div或组件？

Question

改进后的问题

我无法识别哪个组件在Angular中滚动，也使用Augury进行调试工具。

我有以下组件结构

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

我采取的步骤

1. 尝试实现窗口访问器服务。调用this.window.window.scrollTo(0,0)方法似乎没有帮助。并且记录y位置显示0.所以我认为它现在是需要调整的窗口。 滚动的窗口
2. 在组件1 ts中，我添加了名为scrollTop的局部变量，然后 在组件1 html中，我慢慢开始添加[scrollTop] =＆＃34; scrollTop＆＃34; 每个div。在重置点击按钮上，我尝试调用 scrollTop = 0向上滚动。没有解决它
3. 然后我假设它可能在应用程序或组件2中。所以我添加了一个 在component1中使用eventemitter，并添加了一个事件监听器 在相同的*重置点击按钮**将调用类似的功能 两个组成部分我也在当地重复过程 scrollTop变量，并慢慢附加到两个div中 组件。

我不知道从哪里开始

之前曾问过

我尝试实现一个提供Window

访问器的服务

但是无论我在多大程度上向下滚动它似乎总是认为它在0位。

这就是css的设置方式

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

这就是html的设置方式

<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",

Answer 1

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

右键单击并检查可滚动的内容。 键入控制台 $0.scrollTop，如果返回的值为0，则继续传播到更高层。

最终发现它隐藏在材料2

的MdSideNavbar中

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

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