使用 JQuery 对聚合物中的元素进行动画滚动效果答案

【问题标题】：Animate scroll effect to element in polymer using JQuery使用 JQuery 对聚合物中的元素进行动画滚动效果
【发布时间】：2015-03-21 04:21:23
【问题描述】：

我正在尝试使用 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);
            })

【问题讨论】：

stackoverflow.com/questions/21218859/… 这可能会有所帮助。

标签： jquery scroll jquery-animate polymer shadow-dom

【解决方案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
    }
}

【讨论】：