Forum Discussion
Vertical Storyline Scrolling
Hello! I have several guidelines created in Storyline. The slides are vertical (portrait) and require people to scroll down to get the information. Scrolling panels didn't work for these guidelines because of the other features included, so the slide size is 1100 width and 2000 height. This works perfectly, but if someone scrolls to the bottom of one slide and then clicks to go to another slide, they start at the bottom where they were on the previous slide. That makes no sense to me, so there has to be way around that. How can I ensure when a slide is clicked, users always start at the top of the slide?
Thank you for clarifying. I see you have two additional buttons (Layer 1 and Layer 2) on the base layer that remain visible on each layer. The issue isn’t with the code itself, but rather with those buttons triggering actions and maintaining focus. This focus precedence prevents the layer from scrolling to the top content as expected. These buttons don’t need to be visible on other layers, as they’re redundant — you already have duplicate buttons on each layer for navigating back and forth. I’ve modified your file so that the JavaScript runs on each layer and changes the state of whichever base layer button gets clicked first to 'Hidden'. Preview the file and let me know if the issue is resolved.
12 Replies
Hello DanielleForm330,
Thanks for reaching out! I understand you are not able to use a Scrolling Panel to navigate your custom slide size in Storyline and are looking for a custom workaround.
- You mentioned other features included. It would be helpful to understand more about your setup. Do you have any motion paths or triggers included in your course to adjust the learner's view/navigation at the slide level?
- I found a related discussion in which folks used JavaScript to enable a vertical scroll effect. Perhaps this will work for your design!
Feel free to share your .story file in this thread so that the community can take a closer look at your current design and share what has worked well for them!
Hello LucianaPiazza! The other features I'm referring to are just the tabs and layers we use to navigate through the guidelines created in Storyline. Some are more complex than others and require a lot of branching, but we don't use any other motion path, triggers, or variables that impact the navigation.
The related discussion is more about a continuous scrolling effect and that's definitely not what we want.
I can't upload an actual guideline, so I've used a bare template to demonstrate my issue. If you preview the entire project and follow the instructions I included, you can see the issue. Thank you!
- You mentioned other features included. It would be helpful to understand more about your setup. Do you have any motion paths or triggers included in your course to adjust the learner's view/navigation at the slide level?
Hi DanielleForm330 ,
The only way I know how to achieve what you want is to add some JS. I learned how to do similar from a super helpful thread a while back. Vertical scroll bar scroll into view. I am not a js expert - still learning. All kudos to superhero SamHill SteveGannon for sharing expertise, the poster for posting - allowing others to learn from his question, and all other posters on the thread.
I also use, among other sites and youtube, Learn JS
Articulate also has a JS group with super helpful contributors and experts who generously share their knowledge: JS Forum ArticulateHere is your file edit - added js on slide 1.3. Scroll bar goes to top of 1.3 when timeline begins.
js from SamHill see "Verticall scroll bar..." link above for details: and here is Review output of edited storyHi Ange ,
That's a nice workaround, but in this particular case, we don't need to overcomplicate it. Since the scroll behavior is automatically applied by Storyline at the slide level, just target the slide container directly and scroll it to the top like this:document.querySelector('#slide').scrollTop = 0;Let's say you just want to do the opposite — scroll to the bottom instead:
var slide = document.querySelector('#slide'); slide.scrollTop = slide.scrollHeight - slide.clientHeight;scrollHeight: total scrollable content height
clientHeight: visible height of the elementSo, the difference gives you the scroll position for the bottom.
Thank you! That works for my slides, but not for my layers. It must be possible for layers (I'd assume), so I'm looking now and definitely saving your JS resources!
