Track Scrolling Panel Position Using JavaScript In Articulate Storyline

I usually take Sunday evenings pretty easy when it comes to work. This week however I couldn’t help but get fired up about some really nifty code that was shared on the Articulate eLearning Heroes forum which seemingly allowed course developers to track the vertical position of a Scrolling Panel in Articulate Storyline!

This in itself opens up so many creative options for developing interactive infographics in Storyline, performing animations and effects to play on screen at just the right point during the user’s interaction with the learning object. See our own use of this for this week’s eLearning Heroes challenge below.

The code itself (shared by user Preethi R) was not completely perfect however, as it did not account for when a user may resize their browser window, or change the orientation of their mobile device, which in effect changes the screen offset value when calculating the overall height of the stage.

We can however account for this with a bit of JQuery, using the .resize event handler! The good news is applying this code to your own project is really straight forward, and does not require a vast amount of pre-existing JavaScript or JQuery knowledge.

Just include the following Execute JavaScript block when your timeline starts in your project:

var x = document.getElementsByClassName("scrollarea-area");

$(window).resize(function(){
var newHeight = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
var height = newHeight;
player.SetVar("height",newHeight);
});

x[0].onscroll = function(){
var height = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop/height*100);
player.SetVar("height",height);
};

And then just be sure to include the JQuery library in your story.html file (around Line 15), as Articulate had removed this library from Storyline earlier in the year:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

For an example of what this code can do, check out our eLearning Heroes Challenge entry below: