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

Question

I'm trying to recreate the page of Hello Monday and I'm currently just adding the static content before adding the parallax effect and auto-scroll. This is what I have so far:

Sandbox Link

One of the issues I'm running into is figuring out the best way to add the content in the overlay div and make it scrollable along with the background image. Should I place numerous divs at 100% height in the overlay? Not entirely sure what would be the best move here.

Answer 1

None of your "scrollable" divs should be scrollable you are going to need to get the wheel event on your body and from that you can basically paginate both parent sections, background and overlay.

All of the divs that will hold your content need to be 100% height or width of the parent depending on the direction of scroll.

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

You will also need to keep track of the height of your parent containers, this is if the window is resized you can correctly figure out how many pixels it is until the next container.