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

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);
});

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

Polymer paper-tabs with core pages scroll height stays the same

polymer