I want to keep the screen focused on the bottom of a scrollable div whenever it gets loaded. What I have in my game is something like this:
<div id="storywindow" style="position:absolute;bottom:0;overflow:auto">\
\
<<display "PreDisplay">>\
\
<<display "Reactions">>\
<div id="location"><<print $location[$char[0].loc].desc>></div>\
\
<<display $story>>\
\
<div id="reports"><<display "Reports">></div>\
\
</div>\
So, in certain conditions the “reports” div gets filled with sencences, and pushes everything upwards, but when the screen gets filled to the brim, further content sinks downwards to be scrolled, as you may expect. Googling I found this javascript code:
var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
if(isScrolledToBottom)
out.scrollTop = out.scrollHeight - out.clientHeight;
The source is this (3rd answer):
https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up
It comes with a lot of other instructions and I get completely lost. I manage well with HTML and CSS, but I barely know anything about Javascript, let alone make it work in a Twine passage. Could somebody tell me what can I do with this?
Thanks a lot in advance.