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 <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>

回答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 question
var $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.

来源：https://stackoverflow.com/questions/28682104/core-scroll-header-panel-jquery-scroll

标签

javascript

scroll

polymer