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

时间:2017-07-09 15:50:07

标签: angular angular-material2

改进后的问题

我无法识别哪个组件在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] =" scrollTop" 每个div。在重置点击按钮上,我尝试调用 scrollTop = 0向上滚动。没有解决它
  3. 然后我假设它可能在应用程序或组件2中。所以我添加了一个 在component1中使用eventemitter,并添加了一个事件监听器 在相同的*重置点击按钮**将调用类似的功能 两个组成部分我也在当地重复过程 scrollTop变量,并慢慢附加到两个div中 组件。
  4. 我不知道从哪里开始

    之前曾问过

    我尝试实现一个提供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",
    

1 个答案:

答案 0 :(得分:1)

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

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

最终发现它隐藏在材料2 enter image description here

的MdSideNavbar中

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

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