如何调试哪个 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

我走过的步数

尝试实施 window 访问器服务。调用 this.window.window.scrollTo(0,0) 方法似乎没有帮助。并且记录 y 位置显示 0。所以我认为现在需要调整的是 window。 window 正在滚动
在组件 1 ts 中，我添加了名为 scrollTop 的局部变量，然后在组件 1 html 中，我慢慢开始添加 [scrollTop]="scrollTop" 每个 div。在 重置点击按钮 上，我会尝试调用 scrollTop=0 向上滚动。没解决
然后我假设它可能在应用程序或组件 2 中。所以我添加了一个 component1 中的 eventemitter，并添加了一个事件侦听器，现在在同一个 *reset tap button** 上会调用类似的功能两个组件。我也在那里重复了当地的过程 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

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

右键单击并检查 可滚动的内容。 在控制台输入 [=11=].scrollTop，如果返回值为0，则继续向上层传播

最后发现是 div 隐藏在 material 2

的 MdSideNavbar 里面

然后在控制器端。 (component.ts) 我添加了一行用于选择 cdk-scrollable，并将其 scrollTop 分配给 0（在我重置为顶级事件监听器函数时）

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

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

How to debug which div or component is scrolling?

angular-material2

angular

修改后的问题

之前问过

这就是 css 的设置方式

这就是 html 的设置方式

这是相关库的版本