Scrolling panel with trigger

Glad you were able to find what you needed here, Eric :) 

Thanks for chiming in to share.

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. 

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

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

I too want the same functionality Curt.  Hope it happens. 

-joe

I agree.  I would love to have a scroll to the bottom trigger for scrolling panels to ensure an entire document is viewed before allowing a learner to continue.

I can definitely use this feature too.

I came across the same issue today and i would love to see a feature that gives me more control over what happens on my slide in regrad to the scrolling panel. Maybe with some sort of variable (Numbers), that indicates how far the scrolling panel has been moved?!? ¯\_(ツ)_/¯

Different layers with an diy-progress-bar do the trick for me now...

Hello. Here is a short piece of code I wrote for the scenario in Storyline where you have a scrolling panel and you want to check whether the learner has scrolled all the way to the bottom. There is, oddly, no built in trigger in Storyline for this.

I've tested this and it seems to work well, but I'd appreciate some folks trying out.

1. Add a JavaScript trigger to the slide where you have a scrolling panel and copy the code in

2. Set a variable in Storyline called 'scrollAtBottom' which is set to 'false' as default

3. Change the number in line 'if (posCalc > 80)'. The number is the position of the bottom of the scrollbar button in the course window as a percentage from the top. You'll need to experiment.

4. Set a trigger in Storyline to 'do something' when 'scrollAtBottom' changes to 'true'. (e.g. allow the learner to proceed/make a button active)

var player = GetPlayer();
var scrollbarBtn = document.querySelector('.scrollarea-btn');
var slideContainer = document.querySelector('.slide-container');
var btnPos = 0;
var slideContainerPos = 0;
var posCalc = 0;
var checkScrollbarPosition = function() {

//DETERMINE THE AMOUNT OF WHITESPACE ABOVE THE SLIDE (OFFSET)
var offset = slideContainer.getBoundingClientRect().top;

//GET POSITION OF SCROLLBAR AND SLIDE CONTAINER
btnPos = scrollbarBtn.getBoundingClientRect().bottom - offset;
slideContainerPos = slideContainer.getBoundingClientRect().bottom - offset;
 
//CALCULATE DISTANCE BETWEEN BOTTOM OF SCROLLBAR AND SLIDE CONTAINER AS PERCENTAGE
posCalc = (btnPos / slideContainerPos) * 100;
 
//FOR DEBUGGING ONLY IN CONSOLE
//console.log('btn btm pos: ' + pos);
//console.log('slide btm pos: ' + slideContainerPos);
//console.log('pos calc: ' + posCalc);
 
//IF POSITION OF SCROLLBAR BUTTON IS MORE THAN 80% FROM TOP OF SLIDECONTAINER SET SL VARIABLE TO TRUE
//Adapt 80% as necessary to accomodate where you want the detection to be
if (posCalc > 80) {
 player.SetVar('scrollAtBottom', true);
 document.removeEventListener('mouseup', checkScrollbarPosition);
 }
}

document.addEventListener('mouseup', checkScrollbarPosition);

Hello everyone!

We are no longer seeing this bug, Object Intersects Trigger with Object in a Scrolling Panel slide won't load, in our latest version of Storyline 360.

I'd recommend using Storyline 360 (Build 3.61.27106.0) or later.

If you need to reach our Support Team, feel free to reach out in this discussion or privately in a support case.