Forum Discussion

DanielleForm330's avatar
DanielleForm330
Community Member
6 months ago
Solved

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 b...
storyline 360
  • Nedim's avatar
    Nedim
    6 months ago

    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.

Nedim's avatar
Nedim
Community Member
6 months ago

Hi 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 element

So, the difference gives you the scroll position for the bottom.

Ange's avatar
Ange
Community Member
6 months ago

Thank you Nedim​, I'm always looking to learn more and finesse the javascript code I have a handle on to date.  Super helpful feedback - I really appreciate it.