我的应用程序基本上是角度材质的md工具栏和md内容。
我希望md-toolbar在用户滚动md-content时消失。
在md-scroll-shrink属性documentation之后,这很简单。
但是,我的md-content指令只是iframe的包装器。因此,当用户滚动应用程序时,它们实际上是在md-content指令中滚动iframe。这意味着md-toolbar指令不会拾取正在滚动的md内容,并且保持全高(不像我想要的那样缩小)。
我采用了original
<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演示和forked it here在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缩小工具栏。