Load passage at bottom and scroll up (Harlowe 3.1.0)

Usually I’m pretty good at scouring the internet for answers but this time I’m stuck.

The project I’m working on has a fake IM system and for each time a new response is added (and a passage switches), I’d like for the page to load at the bottom, with the option to scroll up. I’m feeling like this may be impossible, or at least beyond my skill level, but I thought I would ask first before I scrap the idea and try something else. Is there any way to make a passage load at the bottom instead of the top?

Thank you for any advice!

I don’t see anything about scrolling in the Harlowe documentation…hmm. I haven’t tried this, but you might be able to get away with putting the following on your passages (maybe in a footer passage?):

<script>window.scrollTo(0,document.body.scrollHeight)</script>

Edit: Oh, wait, that might animate the scrolling (depending on people’s browser settings), so you might also try document.documentElement.scrollTop = document.documentElement.scrollHeight ?

I couldn’t seem to get it working, thank you for your quick response though! It seems to always reload at the top no matter what I try. :confused:

OK, I just went and tried it, and had to modify it a bit. But putting this in a footer-tagged passage seems to work for me:

<script>
window.setTimeout(function(){
	document.documentElement.scrollTop = document.documentElement.scrollHeight
}, 0)</script>

I’m not familiar enough with the internals of Harlowe to say for sure, but I suspect the page has been generated but not actually inserted into the document when the script runs, so window.setTimeout(function(){ ... }, 0) tells the scrolling code to wait and give other code (like Harlowe’s rendering code) a chance to finish first.

See if that works for you. If not, I can go dig up a copy of Harlowe 3.1.0 (I was working with version 3.2.1) and figure out what else might be going on, but I think this should do it.

It worked!! Thank you so much for the help :slight_smile:

Harlowe’s Passage Transition process has a two pass rendering sequence.

  1. HTML elements for Passage are generated, then wrapped within a special ‘parent’ custom HTML element before being added to the DOM.
  2. Harlowe engine waits for a specific period of time…
  3. Harlowe removes the special ‘parent’ custom HTML element (and its children) from the DOM, then re-adds those children elements to the DOM again without the wrapper element.

The above double rendering combined with specific CSS is how Harlowe implements the “fade-int” visual effect associated with Passage Transitioning.

It is possible that your setTimeout() call is required so that your scroll action is performed after the second rendering has occurred.

1 Like