Jquery 元素上存在skrollr溢出问题：滚动

我正试图在skrollr的帮助下制作一个带有一些动画的漂亮单页。举一个非常简单的例子，共有三张幻灯片，幻灯片的宽度和高度均为100%，最后一张幻灯片上有一个溢出：自动，因此可以滚动其内容，而不需要任何动画，可能不需要超过100%的高度，例如：关于、联系我们和页脚部分

我的理解是，我可以使用skrollr在元素上设置不透明度0或显示无。第一个和第二个的z索引比第三个高，因此隐藏前两个应该会自动显示第三个

我使用jQuery来确认这一点

---

$（'.slide1，.slide2'）.css（'opacity'，0）我在Chrome、FF和Safari中查看时看到的问题是，当滚动条到达第三张幻灯片时，它只开始滚动该幻灯片中的内容。因此，滚动条功能将仅在该容器内滚动（不使用轨迹板时）

编辑：由于第三张幻灯片需要独立滚动，因此它不能是
位置：固定的
。相反，我们将使其成为绝对值，如下所示：

.slide3 {
  position: absolute;
  top: 200%;
  left: 0;
  height: auto;
  width: 100%;
}

并删除该幻灯片上的skrollr定义。由于它是相对于主体定位的，因此我们可以添加
top:200%
属性，并知道它将在前两个
100%
部分完成滚动后显示。这还允许在整个动画序列中使用滚动条

下面是一个更新的codepen，添加了这两个修复程序：


如果您想完成一些不同的任务，请告诉我，我可以添加一些附加信息。
我需要第三个可滚动的容器。这将是一些组件，包括关于我们，联系我们，和一个页脚，将超过100%的网页，将不需要任何动画。太好了，感谢澄清！我已经更新了我的答案/代码笔，以实现您的目标。太棒了。你换了什么？高度？它适用于除ChromeIt之外的所有浏览器。对我来说，ChromeIt似乎适用于Chrome，只是花了一点时间来更新代码笔（可能是缓存的？）。我用更多的信息编辑了答案，但基本上，问题是
.slide3
无法
修复，因此我通过绝对定位将其从流程中拉出。它的
top
属性为200%（因为我们知道其他幻灯片都是100%），并且删除了上面的skrollr声明，因为它只是挂在外面等待显示。看看我用skrollr做的这支笔，它可以做一些很酷的事情：我用scrollmagic做了一些事情，它在这种特殊类型的滚动中肯定有一些优势。但要复杂得多