window.scrollTo() breaking with Polymer Project core-scroll-header-panel

Question

I'm using the Polymer project and am stuck trying to scroll to elements on the page using javascript.

I'm trying to call window.scrollTo(x,y) on a page that uses core-scroll-header-panel but just get undefined when trying to do this.

Here is a plunker that shows the problem in action. Hit the CLICK ME link to attempt to scroll to 100,0. You will see that this doesn't happen.

If you comment out the <core-scroll-header-panel> lines then you will see that clicking the same link will scroll you down the page. Here is the relevant plunker.

I know that I can use document.getElementById('some-element').scrollIntoView() but this doesn't help me achieve what I want to achieve, which is animated scrolling down the page to the element. I also know that window.scrollTo() will not be animated, but I can use that call to make my own animated scroll method.

Any ideas around why this is happening, and how I can fix this to get the desired behaviour? jQuery is not an option.

Answer 1

This issue was what Andreas mentioned in his comment.

The scroll isn't bound to the window, but is bound to a component in the shadow dom.

In this particular instance the window.scrollTo call needs to be replaced with this:

document.querySelector('core-scroll-header-panel').scroller.scrollTop = 100;

Here is the relevant plunker.