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，其中包含主要内容和#headerContainer其中包含标题内容。

我使用之前发布的方法进行了一些小改动（聚合物元素是您的自定义节点）：

// 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的事件被记录到控制台，并最终成为我一直在寻找的罪魁祸首。因此，为了将其全部包装起来，生成的（跨浏览器）代码将如下所示：

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);

希望这可以帮助遇到这个问题的其他任何人，并希望谷歌将这个怪癖添加到它的聚合物文档中。

core-scroll-header-panel + jQuery scroll

1 个答案: