Scrolling panel with trigger

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