核心-滚动-标题-面板+ jQuery滚动
核心-滚动-标题-面板+ jQuery滚动
提问于 2015-02-23 19:47:38
使用谷歌聚合物，我试图动画的内容滚动我的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>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-24 15:19:09
我感到惊讶的是，没有人试图给出答案，但经过一些摆弄，我设法找到了解决办法。
在一些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);希望这能帮助其他遇到这个问题的人，希望Google能在它的聚合物文档中加入这个怪癖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28682104
复制相关文章
相似问题
腾讯云开发者
