如何阻止iframe滚动直到它完全在页面上？ （里面的图片）

Question

我最近受到了照片博客Up On A Hill的启发，它使用照片创建的框架只有在您滚动浏览帖子上的所有文字后才会移动。我想做类似的事情，但框架的HTML页面滑过而不是照片。而不是简单地滚动浏览每个页面，我希望新的内容像卡片滑过旧内容一样 - 也就是说，当新内容滑过顶部时，旧页面保持不变。

问题是，HTML页面比照片更挑剔，而且，我在使用JavaScript方面非常业余。

我制作了一个仅限CSS的模型。你有一个看起来像网站的框架，但是当你到达底部时，下一个框架会向上滑动：

i.stack.imgur.com/33JMO.png

除了两件事之外，那将是愚蠢的。首先，向上滑动的框架是一个活动页面，这意味着如果您的鼠标在滚动时悬停在它上面，该框架内的内容也会滚动，而不是继续将新的“卡”移动到页面上。所以你结束了这样的混乱，底部的文章滚动到最后但它只占用了一小块页面空间：

i.stack.imgur.com/9KSd4.png

还存在一个问题，即此布局仅起作用，因为一个帧固定在页面上，而另一个帧是绝对的。但这似乎是一个不那么具有挑战性的问题，而不是在滚动之前确保卡完全在页面上。

我如何防止iframe滚动直到它在顶部？我想这个解决方案会以某种方式隐藏溢出，但是我不确定我是如何检测iframe在页面上的位置，或者我是如何在它处于适当位置后改变它的可滚动性。

Answer 1

Up On A Hill不使用iframe来实现它们的效果，并且它们实际上阻止滚动发生。事实上，他们实现效果的方式是将所有图像与滚动条同步移动到页面上，在某些时间间隔内暂时禁用此效果。这给人一种幻觉，即滚动被禁用。

你无法用CSS做到这一点。我的建议是

• 不要使用iframe（他们可以让事情变得复杂，就像你已经找到的那样）。
• 看看Up On A Hill的HTML和JS，看看他们是如何完成他们想要做的。不要偷偷偷走它！如果你问，也许他们会允许你使用它。
• 使用jQuery。
  • 学习一些教程。
  • 阅读.scrollTop和。position（也许.offset），因为这些将用于计算和设置页面上的CSS位置。