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 <body> tag like in most classic cases:
$('html, body').animate({
scrollTop: element.offset().top
}, 400);
Does not work.
So I assumed that there is an overlaying scrollable <div> that is being generated. Yet, upon looking through the DOM and attempting the scroll on multiple elements, it had all failed. So, I decided to try the ultimate test:
$('html /deep/ *').animate({
scrollTop: element.offset().top
}, 400);
This works.
So the question is, how do I animate the scrolling of core-scroll-header-panel? Or is there a way to tell which element is being altered by html /deep/ * selector? I attempted something along the lines of this (followed by the second example) without success:
$('html /deep/ *').scroll(function(e) {
console.log(e.currentTarget.id);
}
Nothing returned.
My current setup:
<core-scroll-header-panel flex fit condenses keepCondensedHeader>
<core-toolbar class="tall category-toolbar" slide-down>
<div class="bottom fit-margin">
<div id="pay-tag" inline flex center fit>pay to</div>
<div id="results-user" inline center-center fit>John Doe</div>
</div>
</core-toolbar>
<div class="center-panel" flex auto>
<!-- content that scrolls -->
</div>
</core-scroll-header-panel>
Aucun commentaire:
Enregistrer un commentaire