使用 JQuery 为聚合物中的元素设置动画滚动效果
Animate scroll effect to element in polymer using JQuery
我正在尝试使用 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);
})
我想到了一个很好的解决方案。如果我添加一个 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 制作滚动动画,但我尝试滚动的元素似乎位于#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);
})
我想到了一个很好的解决方案。如果我添加一个 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
}
}