Core-scroll-header-panel + Jquery Scroll

Using Google Polymer, I am attempting to animate the scrolling of the content of my core-scroll-header-panel with little success. I attempted scroll the the tag like i

Solution 1:

I'm surprised that no one has attempted to give an answer to this, but after some fiddling I managed to find the solution.

Looking through the source with the help of some javascript, I found that core-scroll-header-panel generates a scrollable element in it's shadow DOM refered to as #mainContainer which hold the main content and a #headerContainer which holds the header content.

I used the method I posted earlier with some small changes (polymer-element being your custom node):

// query all possible elements in questionvar $this = $('html /deep/ {polymer-element} /deep/ *');

// register scroll event to log id
$this.scroll(function(e) {
   console.log(e.currentTarget.id);
});

// begin animated scroll
$this.animate({
   scrollTop: 200
}, 400);

This resulted in the events of #mainContainer being logged to the console and ultimately the culprit I have been looking for. So to wrap it all up, the resulting (cross-browser) code would look like this:

var element = $('#myElement');
var scope = this.shadowRoot.querySelector('core-scroll-header-panel');
var scrollable = scope.shadowRoot.querySelector('#mainContainer');

$(scrollable).animate({
    scrollTop: element.offset().top
}, 400);

Hopefully this helps out anyone else that encounters this issue, and hopefully Google will add this quirk to it's polymer documentation.