core-scroll-header-panel + jQuery 滚动

Question

使用 Google Polymer，我试图为 core-scroll-header-panel 的内容滚动设置动画，但收效甚微。我尝试像大多数经典案例一样滚动 <body> 标签：

$('html, body').animate({
   scrollTop: element.offset().top
}, 400);

无效。

所以我假设正在生成一个覆盖滚动条 <div>。然而，在查看 DOM 并尝试在多个元素上滚动时，它都失败了。所以，我决定尝试终极测试：

$('html /deep/ *').animate({
   scrollTop: element.offset().top
}, 400);

有效。

所以问题是，如何为 core-scroll-header-panel 的滚动设置动画？或者有没有办法告诉 html /deep/ * 选择器正在改变哪个元素？我尝试了一些与此类似的事情（后面是第二个例子）但没有成功：

$('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>

Answer 1

令我惊讶的是，没有人试图对此给出答案，但经过一些摆弄后，我设法找到了解决方案。

在一些 javascript 的帮助下查看源代码，我发现 core-scroll-header-panel 在其阴影 DOM 中生成了一个可滚动元素，称为 #mainContainer主要内容和包含 header 内容的 #headerContainer。

我使用了我之前发布的方法并做了一些小改动（polymer-element 是您的自定义节点）：

// 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 事件被记录到控制台，最终成为我一直在寻找的罪魁祸首。因此，总而言之，生成的 (cross-browser) 代码将如下所示：

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 将此怪癖添加到它的聚合物文档中。

core-scroll-header-panel + jQuery 滚动

core-scroll-header-panel + jQuery scroll

javascript

scroll

polymer