1

我有一个顶部导航、侧导航和页面的主要内容。单击时，侧面导航上的选项卡应将与选项卡关联的 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;
}

侧导航项目

<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. 不让我的侧边和顶部导航棒，如何实现滚动？我使用溢出的想法，并且使内部容器的高度大于其父容器是正确的想法吗？

谢谢你的帮助

4

0 回答 0