0

My app is basically a angular-material md-toolbar, and a md-content.

I want the md-toolbar to disappear as user scrolls the md-content.

This would be simple enough following the md-scroll-shrink attribute's documentation.

However, my md-content directive is simply a wrapper for an iframe. So, when the user scrolls the app, they are really scrolling the iframe within the md-content directive. This means the md-toolbar directive doesn't pick up on the md-content being scrolled, and remains full height (not shrinking, like I want).

I've taken the 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 demo and forked it here with an iframe in the md-content. 

 <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>

Can javascript on the main page detect scrolling of its iframe? If so, I can perhaps write custom logic to scroll the containing page, or shrink the toolbar with css.

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
AlecPerkey
  • 659
  • 2
  • 11
  • 21
  • Possible duplicate of [Make iframe automatically adjust height according to the contents without using scrollbar?](http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using) – Asons Nov 10 '15 at 16:40
  • If you use the "duplicate post" concept, your md-content will scroll the iframe and trigger your md-toolbar – Asons Nov 10 '15 at 16:40
  • To bind scroll of iframe, check this post: http://stackoverflow.com/questions/27542785/binding-scroll-event-to-iframe – Asons Nov 10 '15 at 16:45
  • I at first avoided making the iframe height equal the src document's height, because this changes based on interaction of the user in the frame. However, in combination with https://github.com/davidjbradshaw/iframe-resizer, this seems a promising approach. As well, binding as in your 3rd comment may also work. I will try these--& update later with my experience. Thank you! – AlecPerkey Nov 10 '15 at 16:57
  • You're welcome ... and if it works out good, please add your result as an answer together with my comment links. – Asons Nov 10 '15 at 17:07

0 Answers0