17 Replies
Russell Killips

You can try doing this with an execute javascript trigger.

var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = x[0].scrollHeight;

You may need to change the x[0]'s to x[1]'s or x[2]'s to target a specific 'scroll area'.

Here's a sample storyline 360 project for you to take a look at.

Russell Killips

I forgot to account for the offset.

To get to the bottom, use:

var x = document.getElementsByClassName("scrollarea-area")[0];
x.scrollTop = x.scrollHeight-x.offsetHeight;

And to get to the Middle use:

var x = document.getElementsByClassName("scrollarea-area")[0];
x.scrollTop = (x.scrollHeight-x.offsetHeight)/2;

Teo Karageorgakis

Hello Russel, thank you for the effort putting in examplaining javascript to us, noobs :) 

I was wondering. Will this be possible if the slider was placed horizontally instead of vertically ?

 

var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = 0;
var width_Slider1 = x[0].scrollWidth - x[0].offsetWidth;

x[0].onscroll = function(){
var player = GetPlayer();
player.SetVar("width_Slider1",x[0].scrollTop);
};

 

Alisha Mehta

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

Russell Killips

Hello Alisha,

Take a look at this story file.

To scroll to the bottom, I'm using this code:

 

var x = document.getElementsByClassName("scrollarea-area")[0];
x.scrollTop = x.scrollHeight-x.offsetHeight;

 

If you have a second scroll area, you need to change the code to target the second one.
Notice the 0 is changed to 1.

var x = document.getElementsByClassName("scrollarea-area")[1];
x.scrollTop = x.scrollHeight-x.offsetHeight;

 

If you have a third scroll area, you need to change the code to target the third one.
This time it is set to 2.

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

Math Notermans

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;