如何创建可滚动的覆盖内容？

Question

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

Sandbox Link

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

Answer 1

您的“可滚动” div 都不应该是可滚动的，您需要在身体上获取轮子事件，并且您基本上可以对父部分、背景和叠加层进行分页。

根据滚动方向，所有包含您内容的 div 都必须是父级的 100% 高度或宽度。

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

您还需要跟踪父容器的高度，如果调整窗口大小，您可以正确地计算出距离下一个容器有多少像素。