css - ScrollReveal、视差效果和溢出属性的问题

Question

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

我的问题:在我页面的页眉部分，我有一个复杂的视差，其中有多个图层的城市 View ，当您向下滚动页面时，它会给您一种深度的印象。然后内容 div 进入 View ，覆盖视差。我基本上改编了 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 代码没有机会正常工作。然而，我需要“溢出:隐藏”属性，这样我的视差就不会失真。

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

1. 我已将我的页面内容从视差 div 中取出。然后我将视差 div 设置为 position: relative 并在其中设置了绝对定位层。然后 page-content div 也被设置为 position: relative 。结果:ScrollReveal 起作用了。但我的视差没有，因为它缺少 parallax__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>
   

2. 我只将视差 div(而不是页面内容)包装在一个包装器中，该包装器设置了 overflow: hidden(而不是视差 div)。问题依然存在。

3. 我在视差 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 现在工作得很好......