ScrollReveal问题、视差效应与溢出特性

Question

这是我在这个社区里的第一篇文章。我想解决一个与ScrollReveal.js代码和我在同一页上构建的视差相结合有关的问题。

我的问题是:在我页面的标题部分，我有一个复杂的视差，在几个层次上有一个城市视图，当你在页面上滚动时，它给你留下了深度的印象。内容div然后进入视差视差的视野。我基本上改编了山姆·贝克汉姆的CodePen中的CSS：

https://codepen.io/samdbeckham/pen/OPXPNp

他称之为.parallax__cover的div层是我放置内容的地方。没有它的掩护，视差就不能工作。

标记结构如下所示：

 <div class="parallax">
   <div class="parallax__layer parallax__layer__0"></div>
   <div class="parallax__layer parallax__layer__1"></div>
   <div class="parallax__layer parallax__layer__2"></div>
   <div class="parallax__layer parallax__layer__3"></div>

   <div class="parallax__cover>
     //page content goes here
   </div>

 </div>

到目前一切尚好。一切都很好。现在，我想添加ScrollReveal.js代码，以便使我的内容-div中的一些元素出现在滚动页上。

我的问题是:我想要出现的元素仍然隐藏着。在谷歌一下之后，我发现了问题所在:当父div被设置为“overflow:隐含”时，浏览器总是以scrollTop值的形式输出0。因此，ScrollReveal代码没有机会正常工作。然而，我需要“溢出:隐藏”属性，这样我的视差就不会被扭曲。

到目前为止我尝试过的是：

1. 我已经把我的网页内容从视差里拿出来了。然后，我将视差div设置为:相对于其内部的绝对定位层。然后将页面内容div设置为“相对位置”。结果: ScrollReveal有效。但我的视差并不是因为它错过了parallax__cover。
2. 我只将视差div (而不是页面内容)包装在一个溢出的包装器中:隐藏(而不是视差)。问题仍然存在。
3. 我在高度为1000 of的视差div中添加了一个空的绝对定位parallax__cover (也尝试了100 of)。页面内容- div保持在视差div之外，位置:相对。视差在起作用。ScrollReveal也是如此。我的问题是:无论我如何定位我的内容，我都无法将其直接置于parallax__cover div之上。我的网页内容要么点击到页面顶部，覆盖视差。或者我的视差和页面内容之间有1000 my (或100 the )高的部分。

我真的被困在这里了，没有更多的想法可以让浏览器输出scrollTop值，并使ScrollReveal重新工作…。

如果有人知道如何解决这个问题，我会非常感激的。非常感谢!

莫里茨

Answer 1

在几个不眠之夜之后，我找到了答案:当溢出设置为隐藏时，不会输出scrollTop值。没有解决办法。所以我所做的就是重组我的视差，仅仅通过background.image属性来实现它。不是通过我的HTML。只有通过CSS。然后我用JavaScript“动画”了那些不同速度的背景图像，…由于没有后台图像所需的溢出“隐藏”，所以ScrollReveal现在正在正常工作…。