Scroll Bar start position

Feb 06, 2014

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.


Thank you,

23 Replies
Ren Gomez

Hi Peter,

We don’t have plans for a feature to start a scrolling panel at a specific position aside from the top, but we appreciate you letting us know this is important to you! We’ll update this discussion if our plans change in the future.

Here's a bit more about how we work to prioritize feature requests.

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();


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.


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 this...

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

Elliot Johnson

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