CODEWITHSUNDEEP
javascripthtmlcssoverlay
user7496931
user7496931

Reputation: 1519

How to create scrollable overlay content?

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.

Upvotes: 1

Views: 240

Answers (1)

LizardKing
LizardKing

Reputation: 356

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.

Upvotes: 1

Related Questions