Scrolling panel with trigger

Mar 02, 2017

Jessica Hinckley
By Jessica Hinckley

Hi all, I have a project with a scrolling panel on one of the slides, and I want the next button to be hidden until they are done scrolling. Is there any triggers/variables that can make it possible? I am using Storyline 360 if that makes a difference.

Thanks!

34 Replies
Chris Reynolds
6 years ago01/31/18 at 3:19 am (UTC)

I tried putting one object in the scrolling panel and another outside the scrolling panel so that when I scrolled, the first object would intersect with the second once the panel had been scrolled to the bottom.

I then added a trigger to occur when the first object intersected the second, but this led to the slide refusing to load.

Ashley Terwilliger-Pollard
6 years ago02/02/18 at 5:46 pm (UTC)

Hi Chris, 

I tested this in the latest update of Storyline 360 (Update 12) and it seems that Storyline is not a fan of the combination of the intersection trigger with an object inside your scrolling panel - as the slide would load if I removed the intersection trigger or removed the object from the scrolling panel. 

With those two items it doesn't preview, or load in the published output either. 

I see a similar issue with an object intersection trigger that doesn't work when supposed to intersect with an object in a group - and since a scrolling panel is similar to a great that makes sense. In that scenario you can set it to intersect with the entire group vs. an individual piece of it - and that works. That clearly wouldn't work for a scrolling panel  though! 

I can share this with our team as a possible software bug. I'm not sure how it's supposed to work actually - as the "intersects" with is often connected to a motion path and not a scrolling panel! I'll let you know either way what I hear back from the team.  

Chris Reynolds
6 years ago02/05/18 at 12:37 am (UTC)

I don't consider this to be a critical issue. This rather convoluted technique exists only because of a lack of triggers specific to a scrolling panel. Good triggers would be:

  • When an object is visible in a panel
  • When an object ceases to be visible in a panel
  • When the bottom of the panel has been scrolled to

A visible state would also be good so we can make things occur whilst an item is visible.

Joshua Johnson
over 5 years ago10/30/18 at 4:05 pm (UTC)

Just an idea, but you could try adding a full screen hot spot or transparent image to the area the user would have to hover over in order to end scrolling. Create a trigger that changes the state of the arrow when the user hovers of said hot spot/image. I tried this in SL 3 (I don' t have access to 360)  with an image and it worked.

Eric Benson
5 years ago02/15/19 at 4:18 pm (UTC)

ok. Actually, I was playing around with this and I had a slight problem with it. In order, for the hot spot to be triggered the user has to let go of the scroll bar and move the mouse over the embedded hot spot. Not a big deal, but functionally annoying. 

So, I thought. Wouldn't it be better if the trigger point occurred while the user was still holding the scroll bar?

The issue I found was the difficulty of placing a hotspot over a scrolling panel. The hotspot becomes a part of the scrolling panel content. 

Solution: Place the hotspot over the scroll bar, not the content, and extending outside the scroll bar. 

I'm glad to say. It worked perfectly. 

Here is how I am using this technique. To trigger audio layers when the user scrolls to certain points within a fairly long scrolling panel. The next thing I'm going to try is to see if I can get the trigger to temporarily remove the ability to scroll while the audio is playing. If I can get it to work I'll let you know. 

Rachael Mordecai
almost 5 years ago05/31/19 at 4:07 pm (UTC)

I know this is an old thread, but hopefully this is helpful to someone. It is possible to detect a mouse 'click' or a 'mousedown' or any other DOM event using Javascript. In the example below I asked the module to listen out for 'mousedown' and if the target was the scrollbar then some variable in Storyline is adjusted. 

I'm not sure whether it's possible to detect how far the scrollbar has been scrolled. I'll update this comment if I find a solution.

SEE MY COMMENTS LATER IN THIS THREAD FOR A POSSIBLE SOLUTION

document.addEventListener('mousedown', function(e) {
      let myClass = e.target.className; 
      //console.log(myClass);
      if (myClass === 'scrollarea-btn') {
            var player = GetPlayer();
              player.SetVar("monitor_panel_click",true);
      }
});
curt switalski
almost 4 years ago07/10/20 at 11:58 pm (UTC)

while this post is a little old, I'm looking to create a scroll panel between multiple slides. Once the learner scrolls to the bottom of the first portion it seamlessly goes to the next slide and so on. and should the user scroll up to view all the previous slides.

Is this possible? Basically a  seamless scroll panel that crosses multiple slides. We are attempting storyline to create a form that captures the date and pull data from a LMS.

thanks so much

Snorre Rubin
over 3 years ago07/27/20 at 11:25 am (UTC)
Gavin Elliott

I know this is an old thread, but hopefully this is helpful to someone. It is possible to detect a mouse 'click' or a 'mousedown' or any other DOM event using Javascript. In the example below I asked the module to listen out for 'mousedown' and if the target was the scrollbar then some variable in Storyline is adjusted. 

I'm not sure whether it's possible to detect how far the scrollbar has been scrolled. I'll update this comment if I find a solution.

document.addEventListener('mousedown', function(e) {
      let myClass = e.target.className; 
      //console.log(myClass);
      if (myClass === 'scrollarea-btn') {
            var player = GetPlayer();
              player.SetVar("monitor_panel_click",true);
      }
});

This code tells you something of how far has been scrolled (in storyline 360 export, anyway):

document.getElementsByClassName('scrollarea-btn')[0].style.top

Note that it will never be 100%, as it gives you as the max is the height of the scroll panel minus the height of the button.

EDIT:

You can calculate how far you have scrolled thus:

var rawPos = Number(document.getElementsByClassName('scrollarea-btn')[0].style.top.replace('%',''));
var btnHeight = Number(document.getElementsByClassName('scrollarea-btn')[0].style.height.replace('px',''));
var panelHeight = Number(document.getElementsByClassName('scrollarea-scrollbar')[0].style.height.replace('px',''));
var scrollPos = Math.round(rawPos*panelHeight/(panelHeight-btnHeight));
console.log(scrollPos)

This will give you an integer of scroll position, in percentage. 

 

Rachael Mordecai
over 3 years ago07/27/20 at 12:52 pm (UTC)

Hey Snorre,

Thanks for taking the time to reply to my post with a solution. Before you edited the post, I was about to reply suggesting that perhaps there's a way to calculate the distance. You read my mind! 

I'll be sure to give this a go in a future project.

Articulate should really build this in as a trigger.

Kind regards

Sign In to Reply