0

我的应用程序基本上是一个 angular-material md-toolbar 和一个 md-content。

我希望 md 工具栏在用户滚动 md 内容时消失。

按照 md-scroll-shrink 属性的文档，这将非常简单。

但是，我的 md-content 指令只是 iframe 的包装器。因此，当用户滚动应用程序时，他们实际上是在 md-content 指令中滚动 iframe。这意味着 md-toolbar 指令不会拾取正在滚动的 md-content ，并且保持全高（不会像我想要的那样缩小）。

我拿了原版

<div ng-controller="AppCtrl" layout="column" style="height:600px" ng-cloak="" 
class="toolbardemoScrollShrink" ng-app="MyApp">

<md-toolbar 
md-scroll-shrink="" ng-if="true" ng-controller="TitleController">`

Angular Material Scroll Shrink 演示并在 md-content 中使用 iframe 将其分叉。

 <md-content flex="">
 <!-- Scroll Wrapper for mobile iOS touch-scrolling -->
 <div class="scroll-wrapper"  style="width:100%;height:400px;">
    <iframe id="some_frame_id"
    src="https://en.wikipedia.org/wiki/Main_Page"
    style="width:100%;height:400px;"
    frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="auto"
    >
    </iframe>
</div>
</md-content>

主页上的 javascript 可以检测其 iframe 的滚动吗？如果是这样，我也许可以编写自定义逻辑来滚动包含页面，或者使用 css 缩小工具栏。

4

0 回答 0