css - polymer 嵌套核心支架和多个垂直滚动条/滚动范围问题

Question

我的 Polymer 站点的当前布局遇到了一些问题，特别是关于嵌套组件及其关联的滚动条。我将首先声明我绝对不是 CSS 大师。我希望我是因为我可能不会像现在这样为此苦苦挣扎。也可以直接跳转到 jsbin URL，因为我的问题可能会变得很明显。

情况:
我目前有一个嵌套的核心脚手架元素，其主要内容通常需要垂直滚动，因此它的垂直滚动条会根据需要激活。然而，由于它是嵌套的，它的容器也可以启用滚动条。理想情况下，我希望在最高级别的元素上有一个滚动条，它可以将脚手架的内容滚动到它的完整垂直范围，但也会导致顶部栏像现在向下滚动时那样滑开。我还注意到脚手架主要内容的高度由加载到其中的第一页决定。具有不同高度的后续页面加载不会导致滚动条高度范围相应地改变。

请注意，出于此 jsbin 演示的目的，我只是将加载外部内容的 iframe 插入到脚手架的内容部分。我的实际站点在内容页面中加载了一堆数据驱动的可折叠高度容器，根据需要水平包装。由于它们的可折叠性，它们的包含页面因此具有动态高度。该高度可能因页面而异，因为其中的容器高度不同。

这是jsbin。谁能把我从这个 css hell 中解救出来，谁就是我的英雄......

http://jsbin.com/muniqi/1/

Answer 1

在我最初的 jsbin 示例代码中，您会注意到我已将核心页面高度指定为“100vh”顶级 polymer 元素(即 my-app-element)。第二级 polymer 元素(即 my-scaffold-page-element)加载到上述核心页面中。因此，嵌套脚手架元素的最大高度为 100vh。在链条的更下方，当脚手架元素的主要内容区域的高度超过其宿主的高度限制时，它会导致出现辅助“内部”滚动条，其垂直范围与原始外部滚动条不同......所以尝试使用单独的外部滚动条不能有效地将内部内容滚动到其整个垂直范围，迫使您也使用内部滚动条来完成工作。至少可以说是丑陋的。

既然我知道是这种情况，一种减少嵌套脚手架元素的主要内容区域出现内部滚动条的可能性的方法是将其父元素的核心页面高度更改为远大于 100vh(400vh？ ).这样做以迂回的方式解决了问题。外部滚动条现在可用于滚动嵌套脚手架内容的整个垂直范围，而不会出现内部滚动条。

在新的 jsbin 示例(如下)中，您可以看到“修复”，它也恰好消除了对核心脚手架的依赖，而不是更愿意以更可配置的方式利用其各个组件。

http://jsbin.com/muniqi/3/