Question

如果在您不在当前页面的顶部时触发页面更改事件，则使用霓虹动画页面时，它将在页面下方平均切换到新页面。默认行为应该是切换页面并显示新页面的顶部。

是否有一种解决方法可以在加载新页面后滚动到页面顶部？

Answer 1

我能够通过将scrollTop设置为包含neon-animated-pages的元素来解决这个问题。当我按下更改我的霓虹动画页面的按钮时，我会调用该函数。

document.querySelector('my-container').scrollTop = 0;

Answer 2

根据我的经验，每个页面最好有自己的纸质标题面板，工具栏等。然后，当您更改页面时，下一页将是@顶部，当您离开页面时，您要离开的页面将具有滚动位置的内存。这种方式对我来说似乎有更好的用户体验。

<neon-animated-pages selected="{{page}}">
  <neon-animatable>
    <paper-header-panel>
      <paper-toolbar></paper-toolbar>
      //page 1
    </paper-header-panel>
  </neon-animatable>
  <neon-animatable>
    <paper-header-panel>
      <paper-toolbar></paper-toolbar>
      // page 2
    </paper-header-panel>
  </neon-animatable>
</neon-animated-pages>

只有其他真正的选择是使用霓虹灯动画结束时触发的事件。

<paper-header-panel id="panel">

Polymer({
  is: 'custom-element',
  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
  },
  _onNeonAnimationFinish: function(e) {
    document.querySelector('#panel').scroller().scrollTop = 0;
    // or if panel is in same element 
    this.$.panel.scroller().scrollTop = 0;
  }
});

这个方法结合其他功能在动画之后运行导致我的应用程序动画看起来有点janky ..这可能并非总是如此我的经验。

Answer 3

这在CSS中是可以解决的。您需要做的是在每个页面中创建单独的滚动上下文。为此，请设置以下内容：

HTML：

<paper-header-panel>
  <paper-toolbar></paper-toolbar>

  <neon-animated-pages selected="{{page}}">
  <neon-animatable>
    <div class="wrapper>
      // Page 1
    </div>
  </neon-animatable>
  <neon-animatable>
    <div class="wrapper>
      // Page 2
     </div>
   </neon-animatable>
</neon-animated-pages>

CSS：

.wrapper {
  position: absolute;
  height: 100%;
  overflow-y: scroll; /* Not always required depending on the stacking context of your site */
}
neon-animatable {
  height: 100%;
}
neon-animated-pages {
  height: 100%;
}

这个解决方案的好处在于每个页面都会记住它之前的滚动位置 - 所以如果你在第1页向下滚动，跳转到第2页，在第2页滚动并跳回到第1页，你将返回到哪里你离开了第1页。

Answer 4

将此添加到更改事件侦听器：

$('#mainContainer').scrollTop(0);

例如：

$('paper-tabs paper-tab').click(function(){
  $('#mainContainer').scrollTop(0);
  scope.selected = $('paper-tabs paper-tab').index(this)
});

您的霓虹灯动画/铁页可能位于纸张标题面板内（如果使用聚合物入门套件，则很常见）。

请参阅https://github.com/PolymerElements/polymer-starter-kit/issues/285

如何在使用neon-animated-pages

4 个答案: