核心滾動標題面板+ jQuery滾動

使用谷歌聚合物，我試圖動畫滾動我的core-scroll-header-panel的內容，但收效甚微。我試圖在滾動的<body>標籤就像大多數經典案例：核心滾動標題面板+ jQuery滾動

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

來源

2015-02-23 David Pullar

我很驚訝，沒有人試圖給出一個答案，但一些擺弄後，我設法找到解決方案。

尋找通過與一些JavaScript的幫助的來源，我發現core-scroll-header-panel產生一個滾動的元素在它的陰影DOM refered爲#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);

希望這有助於出其他任何人遇到這個問題，並希望到它的聚合物文檔谷歌將添加此怪癖。

來源

2015-02-24 15:19:09

我剛剛在github問題跟蹤器上爲此創建了一張票據。 – Andre 2015-03-20 02:56:22

核心滾動標題面板+ jQuery滾動

回答

相關問題