使用 JQuery 为聚合物中的元素设置动画滚动效果

Question

我正在尝试使用 JQuery 制作滚动动画，但我尝试滚动的元素似乎位于#shadow-root。

我要滚动的元素是主容器。元素树：

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

你能在 Polymer 中使用 JQuery 操作#shadow-root 吗？
在 Polymer 中是否有另一种动画滚动效果的方法？

JQuery:

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

Answer 1

我想到了一个很好的解决方案。如果我添加一个 fire-event 我总是可以滚动到顶部。像

任何页面

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

主页 (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
    }
}

使用 JQuery 为聚合物中的元素设置动画滚动效果

Animate scroll effect to element in polymer using JQuery

jquery

scroll

jquery-animate

polymer

shadow-dom