角质材料sidenav不能像预期的那样在固定格子中工作

我正在尝试做以下工作，但遇到一些问题，这个plunk显示了我想要做的事情：https://plnkr.co/bCMKRr，只有两个打字稿文件，md内容在mainContent.component.html ：角质材料sidenav不能像预期的那样在固定格子中工作

<md-sidenav-container> 

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

</md-sidenav-container>

香港专业教育学院有一个顶部导航栏中，这是固定的，和左导航栏那也是固定的，那么Ive得到了中留下的空间的主要内容。

在那个主要内容中，我得到了一些按钮，它们会在右侧打开一个材质sidenav，由于按下了哪个按钮，此材质sidenav的内容会有所不同。

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

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

来源

2017-09-20 jupiar

你可以得到sidenev出容器

Here is working plunker

来源

2017-09-20 03:58:53 jitender

我看你做了什么，它的工作，但不完全是我想要发生的事情。我只是更新了一下plunker，当sidenav打开时，将鼠标悬停在sidenav上，您可以将sidenav滚动到其内容的真实长度，主内容本身不会滚动。但是悬停在主要内容上，包含该组件的div会移过标题并移到浏览器窗口的顶部，一旦它不再滚动即可。我的目标是，如果徘徊在主要内容上，绝对没有卷轴。如果没有标题，那么它工作正常，但我真的需要标题。 – jupiar

我已经更新了这个plunker并回答它是否适合你 – jitender

你帮我更好地理解了这个问题，但你的plunk仍然滚动通过标题，我的答案与plunk显示主要内容没有滚动，但全滚动侧边栏 – jupiar

我实现解决方案的

<md-sidenav-container> 

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

，它是某些类的div和相应的CSS样式的组合。新的plunk在 https://plnkr.co/IiidRr包含的代码正是我想要的。

，进行了效果最显着的变化是确定含有该成分的股利为

position: fixed;

，它不有：

overflow-y: scroll;

来源

2017-09-21 07:00:18 jupiar

角质材料sidenav不能像预期的那样在固定格子中工作

回答

相关问题