Scroll Bar start position

Hi Russell... I have been using your javascript solution to manipulate the scroll position in my course. Thank you.

This solution works perfectly on the base slide. But now I need to manipulate scroll position on layers and this javascript does not work for layers. It would be great if you could let us know if/what edits can be made to apply this solution for scrolling panes on layers.

Thanks

For the not-so javascript minded ones... in Russel's code he uses

var x = document.getElementsByClassName("scrollarea-area")[2];

document.getElementsByClassName captures all HTML-elements on the page with the given class-name. So if you have 5 scrollareas they all get into a HTMLCollection. Given that it a possibility is you capture all scrollAreas and then can act upon that... something like...

var scrollAreaCollection = document.getElementsByClassName("scrollarea-area");

So this scrollAreaCollection now is a HTMLCollection of all scrollareas on your page... and as Russel does too, you can either loop them all...

//loop through the collection
for(var i = 0; i < scrollAreaCollection.length; i++){
scrollAreaCollection[i].scrollTop = scrollAreaCollection[i].scrollHeight-scrollAreaCollection[i].offsetHeight;
}

or act on a specific one...like this...

var scrollAreaToChange = scrollAreaCollection[0];
scrollAreaToChange.scrollTop = scrollAreaToChange.scrollHeight-scrollAreaToChange.offsetHeight;


Im having the issue where my scroll bar is not starting at the top, but about 20% down the scrollable area. How could this be happening if this setting cant be changed?

Edit: I see another thread talking about text fields in the scrollable area and the scroll bar will start where that first text field is. I believe this is an unintended feature. Im just going to make a small transparent text field at the top to fix it

Sorry, not very good with javascript. I am trying to simulate a conversation but since the scroll bar starts at the top, my animation is not working well on the last slide. Help please! Ta!

@ russell. This is very great for us JS novices. Thank you.

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.

Kind regards,
Math