Polymer scrolling issue

2019-02-12 23:20发布

站内文章 / 前沿技术
76 0 0

问题:

Hi I'm just playing around a bit with polymer and got a problem.

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.

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.

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&auml;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;">
                                        &nbsp;&nbsp;<paper-fab icon="arrow-back" role="button" class="mini" onclick='changeBack();' slide-up></paper-fab>
                                    </td>
                                    <td class='ergebnisBig' id='placeholderErgebnis'>
                                        &nbsp;
                                    </td>
                                    <td style="width:40px;">
                                        <a name="top" id="top">&nbsp;</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>

回答1:

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;


标签： scroll polymer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~