core-scroll-header-panel + jQuery scroll [英] core-scroll-header-panel + jQuery scroll
问题描述
使用Google Polymer，我试图动画滚动我的 core-scroll-header-panel 的内容，但收效甚微。我尝试在大多数经典案例中滚动< body> 标记：
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);
不起作用。
所以我假设正在生成一个重叠的可滚动< div> 。然而，在查看DOM并尝试滚动多个元素时，它都失败了。所以，我决定尝试终极测试：
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);
一切正常。
所以问题是，如何设置 core-scroll-header-panel 的滚动动画？或者有没有办法告诉哪个元素被 html / deep / * 选择器改变？我尝试了一些事情（接下来是第二个例子）没有成功：
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);
}
没有返回。
我当前的设置：
<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>
推荐答案
我很惊讶没有人试图给出答案，但经过一番调整我找到了解决办法。
I'm surprised that no one has attempted to give an answer to this, but after some fiddling I managed to find the solution.
寻找通过一些javascript的帮助，我发现 core-scroll-header-panel 在它的阴影DOM中生成了一个可滚动的元素，称为保存主要内容的#mainContainer 和保存标题内容的 #headerContainer 。
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);
这导致了 #mainContainer 的事件登录到控制台，最终成为我一直在寻找的罪魁祸首。因此，为了将其全部包装起来，生成的（跨浏览器）代码将如下所示：
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);
希望这可以帮助遇到这个问题的其他人，并希望Google会将这个怪癖添加到它的聚合物中文档。
Hopefully this helps out anyone else that encounters this issue, and hopefully Google will add this quirk to it's polymer documentation.
这篇关于core-scroll-header-panel + jQuery scroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
