如何創建可滾動的覆蓋內容？

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
})

您還需要跟蹤父容器的高度，這是如果調整窗口大小，您可以正確計算出下一個容器之前的像素數。