Scrolling panel with trigger

Mar 02, 2017

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
Mirco Pietsch

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...

Rachael Mordecai

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);
Lauren Connelly

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. 

Jose Tansengco

Hi Jean-Guy, 

Sorry to hear that you ran into a similar issue.

Would you be willing to share a copy of your project file here or in private by opening a support case so we can test if the issue you're encountering is related to the bug discussed in this thread? We'll delete it when we're done testing!

Vadim Ro

Great solution, Simon, and it works for me too. One little note only. If somebody uses mouse wheel for scrolling, mouseup event not fires. For this scenario wheel event will be useful.

document.addEventListener('mouseup', checkScrollbarPosition);
document.addEventListener('wheel', checkScrollbarPosition);
Shadowscape, Inc.

This bug absolutely still exists. However, I found a work around. Instead of having the object in the scrolling panel intersect with a target outside the scrolling panel (which still stopped the page from rendering), instead, I created the trigger so that the object outside the scrolling panel needed to intersect with a target inside the scrolling panel. However, the only way I could get it to work was to loop an animation to move the object that's outside the scrolling panel on a small line motion path. The path was small enough that it never leaves the object inside the scrolling panel except if the user scrolls off it. Since both are clear objects, the user can't see any of this happening.