Is there a way to have the scroll bars start with the bar at the bottom of the window/list instead of the top? I'm doing a software simulation and the scroll windows in the software always have the active material on the bottom of the list. I would like my scroll windows to reflect the same.
For your code, I'm trying to execute something that I'm not sure if it works. This is what I'm trying to do:
I created a chat box with a scroll panel and when a user hits enter it will show a layer with a new chat scroll panel. I'm trying to use the code to have the new chat scroll to the bottom but it's showing at the top as usual instead of the bottom of the chat.
As you have multiple scroll panels ( in fact that are the textareas ) the code from Russel grabs all scroll panels/text areas in the Storyline and sets them in this htmlCollection.
The below line does that. var x = document.getElementsByTagName('textarea')[0]; Where x is the htmlCollection ( so all textareas in your Storyline ) and the [0] at the end ensures that only the first entry will be used.
So when you have multiple textareas in your Storyline you need to ensure you target the correct one. Several ways to do that.
One is like this. var scrollAreas = document.getElementsByTagName('textarea'); //First we get all textAreas in a htmlCollection. Russel called that x, but i like more descriptive names. var scrollArea1 = scrollAreas[0]; var scrollArea2 = scrollAreas[1]; //Then we set all scrollAreas we have to a variable and next we can target them scrollArea1.scrollTop = (scrollArea1.scrollHeight-scrollArea1.offsetHeight) * 1/2; scrollArea2.scrollTop = (scrollArea2.scrollHeight-scrollArea2.offsetHeight) * 1/2;
Other way is like this. var x2 = document.getElementsByTagName('textarea')[1]; x2.scrollTop = (x2.scrollHeight-x2.offsetHeight) * 1/2;
Both should work. I prefer the first way as its more organized and clear, but in fact its the same.
30 Replies
Hello Agnes,
This code below should scroll down half way for a text entry field.
var x = document.getElementsByTagName('textarea')[0];
x.scrollTop = (x.scrollHeight-x.offsetHeight) * 1/2;
Thank you so much, Russell! You are a lifesaver!
Thank you for this work around. It works perfectly. Thanks again for sharing.
For your code, I'm trying to execute something that I'm not sure if it works. This is what I'm trying to do:
I created a chat box with a scroll panel and when a user hits enter it will show a layer with a new chat scroll panel. I'm trying to use the code to have the new chat scroll to the bottom but it's showing at the top as usual instead of the bottom of the chat.
As you have multiple scroll panels ( in fact that are the textareas ) the code from Russel grabs all scroll panels/text areas in the Storyline and sets them in this htmlCollection.
The below line does that.
var x = document.getElementsByTagName('textarea')[0];Where x is the htmlCollection ( so all textareas in your Storyline ) and the [0] at the end ensures that only the first entry will be used.
So when you have multiple textareas in your Storyline you need to ensure you target the correct one. Several ways to do that.
One is like this.
var scrollAreas = document.getElementsByTagName('textarea');//First we get all textAreas in a htmlCollection. Russel called that x, but i like more descriptive names.var scrollArea1 = scrollAreas[0];var scrollArea2 = scrollAreas[1];//Then we set all scrollAreas we have to a variable and next we can target themscrollArea1.scrollTop = (scrollArea1.scrollHeight-scrollArea1.offsetHeight) * 1/2;scrollArea2.scrollTop = (scrollArea2.scrollHeight-scrollArea2.offsetHeight) * 1/2;Other way is like this.
var x2 = document.getElementsByTagName('textarea')[1];x2.scrollTop = (x2.scrollHeight-x2.offsetHeight) * 1/2;Both should work. I prefer the first way as its more organized and clear, but in fact its the same.
Kind regards,
Math