角度材料sidenav不能在固定div中按预期工作

Question

我正在尝试执行以下操作，但遇到一些问题，此插件显示了我尝试做的事情：https://plnkr.co/bCMKRr，只有两个打字稿文件，md内容位于mainContent.component.html：< / p>

<md-sidenav-container>

<md-sidenav #sidenav class="example-sidenav2" align="end" mode="over">
</md-sidenav>

</md-sidenav-container>

我有一个固定的顶部导航栏，还有一个固定的左侧导航栏，然后我在剩下的空间中获得了主要内容。

在那个主要内容中，我有一些按钮会在右边打开一个材料sidenav，由于按下了哪个按钮，这个材料sidenav的内容会有所不同。

现在它在打开时会滚动主要内容。我希望它打开，当它向下滚动时，sidenav内容会滚动，但主要内容不会滚动。

任何人都知道如何做到这一点？

Answer 1

你可以从容器中获取sidenev

 <md-sidenav-container>

<div >
   some long contents
</div>
</md-sidenav-container>
<md-sidenav #sidenav class="example-sidenav2" align="end" mode="over">

Here is working plunker

Answer 2

我实现了解决方案，它是div的某些类和相应的css样式的组合。 https://plnkr.co/IiidRr处的新插件包含的代码完全符合我的要求。

产生效果的最值得注意的变化是将包含组件的div定义为

position: fixed;

并且没有：

overflow-y: scroll;