滚动iframed内容缩小工具栏

时间:2015-11-10 16:25:02

标签: javascript iframe scroll material-design angularjs-material

我的应用程序基本上是角度材质的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缩小工具栏。

0 个答案:

没有答案