Question

这是我在这个社区中的第一篇文章。我打算放松解决与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：隐藏”，出于某种原因，浏览器始终将0作为scrollTop值输出。因此，ScrollReveal代码没有机会正常工作。但是，我需要“溢出：隐藏”属性，以使我的视差不会失真。

到目前为止我尝试过的：

我已将页面内容从视差div中取出。然后，我将视差div设置为position：相对，其中包含绝对定位的图层。然后将页面内容div设置为position：相对。结果：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之外，位置：相对。视差正常工作。 ScrollReveal也是如此。那么我的问题是：无论我如何定位内容，我都永远无法将其直接定位在parallax__cover div上方。我的页面内容要么对齐到页面顶部，要么覆盖视差。或者我在视差和页面内容之间有一个高1000px（或100vh）的区域。

我真的很困在这里，不知道该怎么做才能基本上使浏览器输出scrollTop值并让ScrollReveal重新工作……

如果有人有一个如何破解的想法，我将不胜感激。非常感谢！

莫里兹

Answer 1

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

ScrollReveal，视差效果和溢出属性问题

1 个答案: