我只是在玩一些聚合物而遇到了问题.
Hi I'm just playing around a bit with polymer and got a problem.
首先是我正在编辑的页面: beta.sgbvm.de/app/site /berichte.php
First here is the Page I'm editing: beta.sgbvm.de/app/site/berichte.php
大多数情况下效果很好(例如过渡等)，但是当我向下滚动列表然后单击某个卡时，该网站位于底部，但我希望它向上滚动.
The most things works pretty well (e.g. transitions etc) but when i scroll down the list and then click on a card the site stays at the bottom, but i want it to scroll up.
现在我搜索了将近5个小时，但是我想不出如何在点击卡片后滚动到顶部.
By now i searched the for nearly 5 hours but i cant figure out how to scroll back to the top after i click on a card.
我读了一些有关访问shadowDom的信息，但我并没有理解他们在说什么.
I read something about accessing the shadowDom but i didnt unterstand what they where talking.
<html> <head> <title>SG Bergedorf/VM - mobile Seite</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script src="../components/platform/platform.js"></script> <link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html"> <link rel="import" href="../components/core-header-panel/core-header-panel.html"> <link rel="import" href="../components/core-toolbar/core-toolbar.html"> <link rel="import" href="../components/core-icon-button/core-icon-button.html"> <link rel="import" href="../components/core-icon/core-icon.html"> <link rel="import" href="../components/core-menu/core-menu.html"> <link rel="import" href="../components/core-item/core-item.html"> <link rel="import" href="../components/paper-fab/paper-fab.html"> <link rel="import" href="../components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../components/paper-ripple/paper-ripple.html"> <link rel="import" href="../components/font-roboto/roboto.html"> <link rel="import" href="../components/core-animated-pages/core-animated-pages.html"> <link rel="import" href="../components/core-animated-pages/transitions/cross-fade.html"> <link rel="import" href="../components/core-animated-pages/transitions/slide-up.html"> <link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html"> </head> <body style="background-color:#F0F0F0;" unresolved touch-action="auto"> <core-drawer-panel> <core-header-panel drawer style="background-color:#fff;"> <core-toolbar style="background-color:#3a3a3a;"><div class="bottom titleDrawer">SG B/VM</div></core-toolbar> <core-menu class="drawer"> <div class="headline"><b>Wähle:</b></div> <core-item icon="mail" label="Nachrichten" onClick="self.location.href='index.php'"></core-item> <core-item icon="content-paste" label="Spielberichte" onClick="self.location.href='berichte.php'"></core-item> </core-menu> </core-header-panel> <core-header-panel id="mainContainer" mode="waterfall-tall" main> <core-toolbar class="tall animate"> <core-icon-button icon="menu" class="buttonDrawer" onclick="document.querySelector('core-drawer-panel').togglePanel();"></core-icon-button> <div flex></div> <div class="bottom indent title">Berichte</div> </core-toolbar> <core-animated-pages class="content" style="background-color:#F0F0F0;" transitions="hero-transition cross-fade slide-up"> <section id="page1" style="background-color:#F0F0F0;" cross-fade horizontal layout wrap> /** Left out a bit here **/ </section> <section id="page2" style="background-color:#F0F0F0;"> <div id="ergebnisBig" style="width:100%" cross-fade> <table cellpadding='0' border='0' cellspacing='0' style='width:100%; background-color:#3a3a3a;' id="placeholderTable" hero> <tr style="width:100%;"> <td style="width:40px;"> <paper-fab icon="arrow-back" role="button" class="mini" onclick='changeBack();' slide-up></paper-fab> </td> <td class='ergebnisBig' id='placeholderErgebnis'> </td> <td style="width:40px;"> <a name="top" id="top"> </a> </td> </tr> <tr> <td id="placeholderHalbzeit" class='halbzeitBig' colspan="3"></td> </tr> <tr> <td id="placeholderTeams" class='teamsBig' colspan="3"></td> </tr> </table> </div> <div style="width:100%;" horizontal center-justified layout> <div id="placeholderText" class="card" style="width:93%;padding:10px;" slide-up> </div> </div> </section> </core-animated-pages> </core-header-panel> </core-drawer-panel> </body> </html>推荐答案
core-header-panel提供了一个 scroller属性，可让您访问内部滚动键div.从那里，您可以使用普通JS对其进行滚动(使用 scrollTop ).
core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).
document.querySelector('#mainContainer').scroller.scrollTop = 0;更多推荐
聚合物滚动问题
发布评论