ScrollReveal 的问题、视差效果和溢出属性答案

【问题标题】：Problems with ScrollReveal, a Parallax effect and the overflow propertyScrollReveal 的问题、视差效果和溢出属性
【发布时间】：2018-06-26 10:12:44
【问题描述】：

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

我的问题：在我的页面的标题部分，我有一个复杂的视差，其中包含多个层次的城市视图，当您向下滚动页面时，它会给您一种深度的印象。然后内容 div 会出现在覆盖视差的视图中。我基本上改编了 Sam Beckham 的 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 代码，以使我的 content-div 中的一些元素出现在滚动上。

我的问题：我想出现的元素仍然隐藏。经过一番谷歌搜索后，我发现了问题所在：由于父 div 设置为“overflow-x: hidden”，浏览器出于某种原因总是输出 0 作为 scrollTop 值。因此，ScrollReveal 代码没有机会正常工作。但是，我需要“溢出：隐藏”属性，这样我的视差才不会失真。

到目前为止我尝试了什么：

我已将我的页面内容从视差 div 中取出。然后，我将视差 div 设置为 position: relative，其中包含绝对定位层。然后页面内容 div 也被设置为 position: relative。结果：ScrollReveal 有效。但我的视差没有，因为它缺少视差__cover。

 <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>

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

我只将视差 div（不是页面内容）包装在一个包装器中，该包装器被赋予了溢出：隐藏（而不是视差 div）。问题依然存在。
我在视差 div 内添加了一个空的绝对定位 parallax__cover，高度为 1000px（也尝试了 100vh）。 page-content-div 保持在视差 div 之外，位置为：relative。视差起作用了。 ScrollReveal 也是如此。那么我的问题是：无论我如何定位我的内容，我都无法将它直接定位在 parallax__cover div 上方。我的页面内容要么对齐到页面顶部，要么覆盖视差。或者我在视差和页面内容之间有这个 1000px（或 100vh）高的部分。

我真的被困在这里，不知道该怎么做才能让浏览器输出 scrollTop 值并让 ScrollReveal 再次工作……

如果有人知道如何破解这个难题，我将不胜感激。非常感谢！

莫里茨

【问题讨论】：

标签： css parallax scrollreveal.js

【解决方案1】：

经过几个不眠之夜，我找到了答案：当溢出设置为隐藏时，滚动顶部的值不会被输出。没有解决方法。所以我所做的是重组我的视差，仅通过 background.image 属性实现它。不是通过我的 HTML。只能通过 CSS。然后，我使用 JavaScript 以不同的速度“动画化”了这些背景图像……而且由于背景图像不需要溢出“隐藏”，ScrollReveal 现在工作得很好……

【讨论】：