Thank you!
The reason I'm using a div as the scroller is because, as far as I'm aware, CSS scroll snapping only works on the window scroll of a container. But maybe I'm wrong?
The reason I've used 'top' to position backgrounds 4 and 5 is to align them with their corresponding cards (cards and backgrounds are separate divs). The cards have a relative position, while the backgrounds by default are stacked on top of each other with a fixed position.
I do this because most of the time, I want to fade between the backgrounds as you scroll down through the cards. It's only rarely that I want the backgrounds to stick with the cards as you scroll between them, e.g. like between card 4 and 5 in this example.
By setting the position of backgrounds 4 and 5 to absolute, and positioning them at 'top: 400vh' 'top: 500vh', I'm trying to simulate how they would be positioned in the flow below background 0, 1, 2 and 3 if those didn't have fixed positions. That way backgrounds 4 and 5 align correctly with cards 4 and 5.
I didn't think the markers were propping the container open because the positions of the cards are relative, so I thought the cards already were propping the container open. E.g. you can still scroll down further to card 6, which works correctly. But I'm by no means confident in the logic here 😅
And yes, the Js is way too repetitive! I've done it like this for now so that I can see and adjust everything manually, as it's my first time using Js to this extent and I'm very much experimenting.