Question

我有一个顶部导航，一个侧面导航和页面的主要内容。单击时，导航栏上的选项卡应将与该选项卡关联的div置于页面顶部（这是我面临的另一问题，因为JS的scrollTop方法无法正常工作，但我可以使用scrollIntoView（），现在就可以解决问题了

模板

<mat-card class="main-card">
  <mat-card-title>Some title</mat-card-title>
  <mat-card-content class="main-content">
    <div class="div1">Div1 content</div>
    <div class="div2">Div2 content</div>
    <div class="div3">Div2 content</div>
  </mat-card-content>
</mat-card>

CSS

.main-card {
  overflow: auto;
  height: 700px;
}

.main-content {
  height: 1000px;
  overflow: auto;
}

sidenav项目

<div class="side-nav">
  <div class="mat-list-item" (click)="handleElemScroll(div1)">
    <span>Div1</span>
  </div>
  <div class="mat-list-item" (click)="handleElemScroll(div2)">
    <span>Div2</span>
  </div>
  <div class="mat-list-item" (click)="handleElemScroll(div1)">
    <span>Div2</span>
  </div>
</div>

在主卡上，即使使用！important，也无法添加高度道具。我曾几次使用角材料遇到这个问题。我强行滚动，但是在滚动中间，整个页面开始滚动。即使我的席卡内容的高度设置为大于席卡本身的高度。

有人可以指导我的几个问题 1.为什么我的整个页面开始滚动到中间？ 2.在不使侧面和顶部导航杆粘住的情况下，如何实现滚动？我的想法是使用溢出，并使内部容器的高度大于其父容器的高度吗？

感谢您的帮助

Angular 6：Mat-card使页面内容使用固定道具可滚动显示

0 个答案: