I am trying to create a site that has half-scrolling sections, like this website in its “about” and “work” sections. The way I have set it up so far is with a div on the left with a height of 100vh and a series of 5 divs on the right each with a height of 50vh, totalling 250vh. I then created a wrapper for my 5 divs and set the overflow to scroll.
However, I would like to achieve two more things:
Allow the right side to scroll when scrolling in the left side. This means if you place your mouse on the left side of the screen, it does not allow the page to continue scrolling until the right side has been fully scrolled-through, so to speak. (As seen on the aforementioned website).
Don’t allow scrolling on the right side until that section has reached the top of the page. This means you can’t scroll through the 5 divs until the left div is taking up the whole screen. (Also done on this website).
Any help would be much appreciated!