This is more of a general CSS+JS question than a Twine one. I’d be more than happy just with a general idea of a potential solution.
I have written a custom function in Snowman so that, when choices take you to new passages, the passage gets appended to the bottom of the existing text, instead of clearing the screen as the default. Also, I have separate divs for narration blocks and choice blocks. So I start with this content:
<div class="narration">...</div>
<div class="choices">...</div>
And when I click a choice, new content is added and it looks like:
<div class="narration">...</div>
<div class="choices">...</div>
<div class="narration">...</div>
<div class="choices">...</div>
I want choice blocks to disappear after moving to the next passage, so the content on page always looks like this:
<div class="narration">...</div>
<div class="narration">...</div>
<div class="narration">...</div>
<div class="choices">...</div>
So far I do that with a simple $('.choices').remove() (before adding the new choice block), and this is when the problem happens. The browser document height is the height of its contents (all these blocks are stacked vertically and have relative positioning). If I remove a block, the total height reduces and there is a jump, a realignment of the viewport.
Imagine that the page is longer than the full screen and the player has moved to the bottom of the page: when removing the last block of content, all the contents above must move to the bottom of the page.
I’ve tried a few changes to the order in which I display the new contents and the delay to remove the old choices, but the jump always happens, and it’s terrible for readability.
Can you think of any alternative way of attacking the problem? Thanks.