聚合物滚动问题 [英] Polymer scrolling issue
问题描述
我只是在玩一些聚合物而遇到了问题.
Hi I'm just playing around a bit with polymer and got a problem.
首先是我正在编辑的页面: http://beta.sgbvm.de/app/site /berichte.php
First here is the Page I'm editing: http://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提供了一个 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;
这篇关于聚合物滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
