change to use addEventListener instead of declarative event binding for

scroll event to avoid unnecessary Platform.flush calls

core-header-panel.html

@@ -73,13 +73,13 @@
 
   <link rel="stylesheet" href="core-header-panel.css">
 
-  <div id="outerContainer" on-scroll="{{scroll}}" vertical layout>
+  <div id="outerContainer" vertical layout>
 
     <content id="headerContent" select="core-toolbar, .core-header"></content>
 
     <div id="mainPanel" flex vertical layout>
 
-      <div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">
+      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
         <content id="mainContent" select="*"></content>
       </div>
 
@@ -105,9 +105,8 @@
     publish: {
       /**
        * Controls header and scrolling behavior. Options are
-       * `standard`, `seamed`, `waterfall`, `waterfall-tall`,
-       * `waterfall-medium-tall`, `scroll` and `cover`.
-       * Default is `standard`.
+       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and 
+       * `cover`. Default is `standard`.
        *
        * `standard`: The header is a step above the panel. The header will consume the
        * panel at the point of entry, preventing it from passing through to the
@@ -170,12 +169,31 @@
       shadow: false
     },
 
-    animateDuration: 180,
+    animateDuration: 200,
 
     modeConfigs: {
       shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
       noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
-      tallMode: {'waterfall-tall': 1}
+      tallMode: {'waterfall-tall': 1},
+      outerScroll: {'scroll': 1}
+    },
+
+    ready: function() {
+      this.scrollHandler = this.scroll.bind(this);
+      this.addListener();
+    },
+
+    detached: function() {
+      this.removeListener(this.mode);
+    },
+
+    addListener: function() {
+      this.scroller.addEventListener('scroll', this.scrollHandler);
+    },
+
+    removeListener: function(mode) {
+      var s = this.getScrollerForMode(mode);
+      s.removeEventListener('scroll', this.scrollHandler);
     },
 
     domReady: function() {
@@ -193,16 +211,25 @@
           this.async(function() {
             header.classList.remove('animate');
           }, null, this.animateDuration);
-          return;
+        } else {
+          header.classList.toggle('animate', configs.tallMode[this.mode]);
         }
-        header.classList.toggle('animate', configs.tallMode[this.mode]);
+      }
+      if (configs.outerScroll[this.mode] || configs.outerScroll[old]) {
+        this.removeListener(old);
+        this.addListener();
       }
       this.scroll();
     },
 
     get header() {
       return this.$.headerContent.getDistributedNodes()[0];
     },
+
+    getScrollerForMode: function(mode) {
+      return this.modeConfigs.outerScroll[mode] ?
+          this.$.outerContainer : this.$.mainContainer;
+    },
 
     /**
      * Returns the scrollable element.
@@ -211,8 +238,7 @@
      * @type Object
      */
     get scroller() {
-      return this.mode === 'scroll' ?
-          this.$.outerContainer : this.$.mainContainer;
+      return this.getScrollerForMode(this.mode);
     },
 
     scroll: function() {