Scroll Bar start position

Hi Strueb,

There is not a way to force the focus of the scroll panel to the bottom at the start, but it sounds like something you may want to share as a feature request. 

This would be really useful for a project I am working on, where i want the scrollbar in a textfield to be at a certain position when the slide starts.

Chris

Hi Chris,

I'm not sure if Strueb determined a method or workaround to use, and as this discussion is a bit older you may also want to message him directly using the "contact me" button on his profile. 

I'm wondering whether this feature is now being implemented in Storyline 3? Also, is there a way to track requested features that have been implemented?

Hi Safurah,

This is not yet a feature in Storyline, but you can see all the features we've released as a part of our Version history. I linked to Storyline 3's version history here. 

is there any update on this feature becoming available?

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.

Shame - as this this would be incredibly useful.

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.

That's really cool - thanks. So how could you scroll, say, to the middle?

Chris

Try dividing the scrollHeight by 2 to get to the middle.

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

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;

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

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

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;

Russel, you saved me with this code. Thank you very much!

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

Thank you, Russell! I needed the scrollbar to default to the bottom to simulate the software environment. This worked beautifully and with no changes on my part! Very much appreciate your help.

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!

Thanks a lot for the JavaScript Code! Is there a way to make the scroll jump to 2/3 or 3/4th? 

Hello Antje

For 2/3 use:

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

For 3/4 use:

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

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