Question

我有一个包含3个标签的页面，每个标签都有不同的内容高度。在移动设备上如果我在第一个选项卡上滚动一半，如果我也切换第二个选项卡，我的滚动条将位于我页面的中间内容中。我想知道当我在标签之间切换时可以显示顶部内容。

Answer 1

好问题。我认为，保留原始的scrollTop位置必须是Polymer中的默认行为。问题出在单个可滚动容器中，例如 core-header-panel 。每个核心页没有多个容器。切换选项卡只会隐藏并显示页面容器。

有一些来自Polymer团队的人，听听他们对这个解决方案的看法会很有意思：

var panel = document.querySelector('core-header-panel');
var core_pages = document.querySelector('core-pages');
var scrollable;

panel.onscroll = function(event) {
  scrollable = event.detail.target;
  var scrollTop = (scrollable.scrollTop || 0);
  var selectedIndex = (core_pages.selectedIndex < 0 ? 0 : core_pages.selectedIndex);
  document.querySelectorAll('paper-tab')[selectedIndex].pos = scrollTop;
}

var tabs = document.getElementById('tabs');
tabs.addEventListener('core-activate', function(event) {
  scrollable.scrollTop = (event.detail.item.pos || 0);
});

具有核心页面滚动高度的聚合物纸张标签保持不变

1 个答案: