I bet you've already heard about details+summary trick, or maybe even fancier tricks.
But what if you want to make a visual novel or a text-based adventure?
Nesting a pile of elements is kind of high-effort, especially if you want multi-directional transitions between them.
Fortunately, there's a simpler solution: divs in a scrollable div. Take a look:
Neat, yeah?
Here's how it works
- We have a container
divfor our game. It should have aposition: relativestyle.
It'll be a point of reference for setting sizes for the rest of the stuff, basically. - Inside it, we have a
divwithoverflow: hiddenstyle.
This will prevent a scrollbar from appearing and spoiling the whole game to the reader. - Inside that, we have a
divwithdisplay: flex(so that elements stack horizontally inside) and width that's large enough to fit (number of pages * 100%).
Here, I have 11 pages and I don't like weird numbers so I used 2000%. - Inside that, we have the actual pages, each of which should use
widththat comes out back to 100% after being multiplied by the width of the container (so, in this case, 5%). - Pages have
idattributes.
Cohost will prepend your id withuser-content-.
I also suggest prepending your id with something unique so that different games don't fight each other on a page. - Links point at those ids - for example,
href="#user-content-mygame-start"for a page withid="mygame-start".
As result, when you click on a link, the browser tries to bring the linked element into view, which scrolls the container to the said page. Since each page is exactly container-sized, there isn't much ambiguity as to what to do.
We do, however, have to account for the header's height (always 4rem tall?), which I added as padding to pages here. I bet there's a better solution.
This is simple enough that it can be written by hand, though I still recommend using prechoster so that you don't have to copy-paste your page style.
Thanks for reading!