一般而言
当我有一个非常长的滚动页面的列表时,我发现很难使用core-animated-pages
聚合物元素来实现芯片列表到卡类型的模式。我认为困难在于,一旦转换完成,隐藏的部分就会从布局中删除,而我很难找到解决这个问题的方法。
简单图解
JSFiddle:http://jsfiddle.net/hmknv3jh/
在输出中,滚动到底部并单击芯片,问题应该是显而易见的。
详细信息
确保您必须滚动才能找到底部的芯片,然后单击其中一个。芯片从屏幕飞到顶部,然后突然卡片居中显示,后面的列表消失了(连同滚动条)。一旦你点击卡片,它就会飞离屏幕底部,列表再次出现,但你在页面的顶部,而不是你点击的底部。
帮助?
有人知道解决这个问题的最好方法吗?理想情况下,我希望卡片的行为像一个模式对话框,在后面的列表中没有移动,但仍然有芯片和卡片之间的良好英雄过渡。
发布于 2015-02-04 09:39:27
要使过渡顺利进行,您需要首先禁用core-animated-pages
的滚动。
core-animated-pages {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
当然,您还需要将列表section
设置为可滚动。
<section style="overflow:scroll">
<div class="chip-container" hero-p on-tap="{{transition}}">
就这样!请参考此JSFiddle以供参考。
发布于 2014-09-28 14:48:06
您的问题是由于脚本滚动到页面顶部这一事实引起的,而这在该场景中并不是真正需要的。
core-header-panel
提供了一个scroller
property,让你可以访问内部的滚动div。在那里,您可以使用vanilla JS滚动它(使用scrollTop)。
document.querySelector('#mainContainer').scroller.scrollTop = 0;
https://stackoverflow.com/questions/25556943
复制相似问题