如何创建可滚动的叠加内容?

Question

我正在尝试重新创建Hello Monday的页面，目前我只是在添加视差效果和自动滚动之前添加静态内容。这是我到目前为止所拥有的：

沙盒链接

我遇到的问题之一是找出在覆盖div 中添加内容并使其可与背景图像一起滚动的最佳方法。我应该在叠加层中以 100% 的高度放置大量divs吗？不完全确定这里最好的举动是什么。

Answer 1

你的"可滚动"div 都不应该是可滚动的，你需要在你的身体上获取轮子事件，从中你基本上可以分页父部分，背景和覆盖。

所有将保存您的内容的div 都需要是父级的 100% 高度或宽度，具体取决于滚动方向。

document.addEventListener('mousewheel', (e) => {
console.log(e.deltaY);
// this will be the direction up or down
})

您还需要跟踪父容器的高度，也就是说，如果调整了窗口的大小，您可以正确计算出直到下一个容器为止有多少像素。