Forum Discussion

JessicaHinckley's avatar
JessicaHinckley
Community Member
8 years ago

Scrolling panel with trigger

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...
storyline 360
GavinElliott-89's avatar
GavinElliott-89
Community Member

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);
      }
});
SnorreRubin-bd9's avatar
SnorreRubin-bd9
Community Member
5 years ago
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. 

 

  • GavinElliott-89's avatar
    GavinElliott-89
    Community Member
    5 years ago

    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

Related Content