Animate scroll effect to element in polymer using JQuery

Question

I am trying to make a scroll animation by using JQuery but it seems like the element I am trying to scroll is located in #shadow-root.

The element which I am trying to scroll is the main container. Element tree:

html body core-scaffold#scaffold #shadow-root core-drawer-panel#drawerPanel core-header-panel#headerPanel #shadow-root div#outerContainer div#mainPanel div#mainContainer

Can you manipulate #shadow-root with JQuery in Polymer?
Is there another way to animate scroll effect in Polymer?

JQuery:

$("#mainContainer").animate({
                scrollTop:$( $('#'+doc_card_id).offset().top)
            },1000, function(){
                console.log($("#doc-card-list")[0].scrollHeight + ' ' + $('#'+doc_card_id).offset().top);
            })

http://stackoverflow.com/questions/21218859/can-i-access-the-shadow-dom-using-jquery this might help. — jimi dough10, Jan 22 '15 at 17:31

score 0 · Accepted Answer · answered Mar 04 '15 at 07:45

I came up with a pretty good solution. If I add a fire-event I could always scroll to top. Something like

Any page

Polymer({ scrollTop: function( this.fire('scroll-top'); ) });

Main page (index.html)

document.addEventListener('scroll-top'){
        var scaffold = document.querySelector('core-scaffold');
        var scrollArea = scaffold.shadowRoot.querySelector('core-header-panel');
        scrollArea.scroller.scrollTop = 0;
        // or make an animate scrolltop
    }
}

Animate scroll effect to element in polymer using JQuery

1 Answers1