javascript - 如何阻止 iframe 滚动直到它完全位于页面上？ (里面的图片)

Question

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

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

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

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

除了两件事之外，那将是巨大的。首先，向上滑动的框架是一个事件页面，这意味着如果您的鼠标在滚动时悬停在它上面，那么该框架内的内容也会滚动，而不是继续将新“卡片”向上移动到页面上。所以你最终会遇到这样一团糟，底部文章滚动到末尾，但它只占用一小部分页面空间:

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

还有一个问题是，这种布局只能工作，因为一个框架固定在页面上，而另一个框架是绝对的。但与确保卡片在滚动之前完全位于页面上相比，这似乎是一个不太具有挑战性的问题。

如何防止 iframe 滚动到顶部？我想解决方案涉及以某种方式 overflow hidden ，但我不确定我如何检测 iframe 在页面上的位置，或者我如何在它就位后改变它的可滚动性。

Answer 1

Up On A Hill 不使用 iframe 来实现它们的效果，它们实际上并不阻止滚动的发生。事实上，它们实现效果的方法是将所有图像与滚动条同步地向下移动页面，在特定时间间隔内暂时禁用此效果。这给人一种滚动被禁用的错觉。

您无法仅使用 CSS 来完成此操作。我的建议是

• 不要使用 iframe(正如您已经发现的那样，它们会使事情变得复杂)。
• 查看 Up On A Hill 的 HTML 和 JS，看看它们是如何完成他们想要做的事情的。不过不要偷!如果您提出要求，也许他们会允许您使用它。
• 使用 jQuery。
  • 学习一些教程。
  • 阅读 .scrollTop 和 .position(也可能是 .offset)，因为这些将是您用来计算和设置它们的内容页面上的 CSS 位置。