ScrollReveal、视差效果和溢出的问题 属性
Problems with ScrollReveal, a Parallax effect and the overflow property
这是我在这个社区的第一个 post。我正准备解决一个与 ScrollReveal.js 代码和我在同一页面上内置的视差组合有关的问题。
我的问题：在我页面的 header 部分，我有一个复杂的视差，其中包含多个图层的城市视图，当您向下滚动页面时，它会给您带来深度的印象。内容 div 然后进入视野覆盖视差。我基本上改编了 Sam Beckham 的 CodePen 中的 CSS：
https://codepen.io/samdbeckham/pen/OPXPNp
他称之为div-layer的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 class="parallax__cover>
//page content goes here
</div>
</div>
到目前为止一切顺利。一切正常。我现在想添加 ScrollReveal.js 代码以使 content-div 中的一些元素出现在滚动条上。
我的问题：我想要显示的元素仍然隐藏。经过一番谷歌搜索后，我发现了问题所在：将 parent div 设置为 "overflow-x: hidden" 时，浏览器出于某种原因总是输出 0 作为 scrollTop 值。因此，ScrollReveal 代码没有机会正常工作。然而，我需要 "overflow: hidden" 属性 这样我的视差就不会失真。
到目前为止我尝试了什么：
我已经把我的 page-content 排除在视差 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>
我只将视差 div（而不是 page-content）包装在一个被赋予溢出的包装器中：隐藏（而不是视差 div).问题依然存在。
我在视差 div 内添加了一个空的绝对位置 parallax__cover，高度为 1000px（也尝试过 100vh）。页面-content-div 与 position:relative 保持在视差 div 之外。视差起作用了。 ScrollReveal 也是如此。我的问题是：无论我如何定位我的内容，我都无法将其直接定位在 parallax__cover div 之上。我的页面内容要么捕捉到页面顶部，要么覆盖视差。或者我有这个 1000px（或 100vh）高的部分 in-between 我的视差和 page-content.
我真的被困在这里，不知道该怎么做才能让浏览器输出 scrollTop 值并让 ScrollReveal 再次工作……
如果有人知道如何解决这个问题，我将不胜感激。非常感谢！
莫里茨
经过几个不眠之夜，我找到了答案：
当溢出设置为隐藏时，不会显示 scrollTop 值。没有解决方法。所以我所做的是重组我的视差，仅通过 background.image 属性 实现它。不是通过我的 HTML。只能通过CSS。使用 JavaScript 然后我 "animated" 那些具有不同速度的背景图像......并且由于背景图像不需要溢出 "hidden"，ScrollReveal 现在工作得很好......
这是我在这个社区的第一个 post。我正准备解决一个与 ScrollReveal.js 代码和我在同一页面上内置的视差组合有关的问题。
我的问题：在我页面的 header 部分，我有一个复杂的视差，其中包含多个图层的城市视图，当您向下滚动页面时，它会给您带来深度的印象。内容 div 然后进入视野覆盖视差。我基本上改编了 Sam Beckham 的 CodePen 中的 CSS：
https://codepen.io/samdbeckham/pen/OPXPNp
他称之为div-layer的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 class="parallax__cover>
//page content goes here
</div>
</div>
到目前为止一切顺利。一切正常。我现在想添加 ScrollReveal.js 代码以使 content-div 中的一些元素出现在滚动条上。
我的问题：我想要显示的元素仍然隐藏。经过一番谷歌搜索后，我发现了问题所在：将 parent div 设置为 "overflow-x: hidden" 时，浏览器出于某种原因总是输出 0 作为 scrollTop 值。因此，ScrollReveal 代码没有机会正常工作。然而，我需要 "overflow: hidden" 属性 这样我的视差就不会失真。
到目前为止我尝试了什么：
我已经把我的 page-content 排除在视差 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>我只将视差 div（而不是 page-content）包装在一个被赋予溢出的包装器中：隐藏（而不是视差 div).问题依然存在。
我在视差 div 内添加了一个空的绝对位置 parallax__cover，高度为 1000px（也尝试过 100vh）。页面-content-div 与 position:relative 保持在视差 div 之外。视差起作用了。 ScrollReveal 也是如此。我的问题是：无论我如何定位我的内容，我都无法将其直接定位在 parallax__cover div 之上。我的页面内容要么捕捉到页面顶部，要么覆盖视差。或者我有这个 1000px（或 100vh）高的部分 in-between 我的视差和 page-content.
我真的被困在这里，不知道该怎么做才能让浏览器输出 scrollTop 值并让 ScrollReveal 再次工作……
如果有人知道如何解决这个问题，我将不胜感激。非常感谢！
莫里茨
经过几个不眠之夜，我找到了答案： 当溢出设置为隐藏时，不会显示 scrollTop 值。没有解决方法。所以我所做的是重组我的视差，仅通过 background.image 属性 实现它。不是通过我的 HTML。只能通过CSS。使用 JavaScript 然后我 "animated" 那些具有不同速度的背景图像......并且由于背景图像不需要溢出 "hidden"，ScrollReveal 现在工作得很好......