paper-header-panel - assigning handler to event content-scroll manually

Question

Using polymer 1.1, I don't want to make a custom element or template for paper-header-panel. How can I assign a handler on the scroll event?

I tried:

bob = Polymer.dom(document).querySelector('paper-header-panel');
bob.scrollHandler = function() {
  console.log('ssssssss');
} 

To no success.

https://github.com/PolymerElements/paper-header-panel/blob/master/paper-header-panel.html#L186

From documentation

Polymer({
  is: 'paper-header-panel',
  /**
   * Fired when the content has been scrolled.  `event.detail.target` returns
   * the scrollable element which you can use to access scroll info such as
   * `scrollTop`.
   *
   *     <paper-header-panel on-content-scroll="{{scrollHandler}}">
   *       ...
   *     </paper-header-panel>
   *
   *
   *     scrollHandler: function(event) {
   *       var scroller = event.detail.target;
   *       console.log(scroller.scrollTop);
   *     }
   *
   * @event content-scroll
   */

and

  ready: function() {
    this.scrollHandler = this._scroll.bind(this);
    this._addListener();

Answer 1

If I understand your question correctly, you want to subscribe the event in js like this -

ready: function () {
    this.$.panel.addEventListener("content-scroll", function () {
        console.log('ssssssss');
    });
}

But I failed to see why you can't do it like shown in the document.

---

bob = Polymer.dom(document).querySelector('paper-header-panel');
bob.addEventListener("content-scroll", function () {
    console.log('ssssssss');
}