Using Scrolling Panels in E-Learning (2020) #273

PreethiR-45f9fe
Community Member
5 years ago
Thanks, Jonathan. It's the power of javascript + variable. Here is the javascript that captures the scrollbar movement.
var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = 0;
var height = x[0].scrollHeight - x[0].offsetHeight;

x[0].onscroll = function(){
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop);
};

I had created trigger in storyline for the variable 'num'. Everytime, the scrollbar moves, the variable 'num' value changes. Based on the 'num' value, the text state i changed.
- Jonathan_Hill
  Super Hero
  5 years ago
  Thanks for sharing! Good to know!
- JodiSansone
  Community Member
  5 years ago
  Thanks for explaining that because I was wondering how you triggered the scrolling.
- Jonathan_Hill
  Super Hero
  5 years ago
  Hey Preethi - thanks again for sharing your JavaScript. I've used it myself in a second demo, below.
  
  It's interesting how it generates a different min/max number when you run it on your local drive, a web server and on a mobile device. The last one is obvious, as it's a smaller screen, but I was surprised at such a big difference when running it locally and on a server.
  
  Perhaps there is a way to obtain the maximum scroll number for a particular screen/device and use this as the basis for the triggers, making it more compatible across devices?
  - ChrisHodgson
    Community Member
    5 years ago
    I believe it's because the code snippet provided by Preethi was slightly 'unfinished', in that there was a height variable declared to calculate the scroll object but this was not actually called upon within the main function.
    
    When setting the variable in Storyline if we instead said
    player.SetVar("num",x[0].scrollTop/height*100);
    We would be converting the slider position into a percentage, whereby the very top of the slider would be 0 and the bottom would be 100 across any screen size.
    
    What this doesn't account for however is if the user changes their screen 'window' size during the activity (e.g. if they were on their phone and switched from portrait to landscape mode)
    
    We can however account for this using the .resize event handler in JQuery! So the final code would look something like this:
    
    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);
    };
    
    (Create a variable in Storyline called 'height' to see the value dynamically change when the browser window is resized)
    
    From my own tests this seems to work, but I'd appreciate others giving it a go and feeding back their results.
    
    NOTE: Articulate removed the JQuery library from Storyline published output in early 2020, so you will need to add this line into your story.html file -
    
    https://articulate.com/support/article/Storyline-How-to-Reference-the-jQuery-Library
    
    (Around line 15)

Blog Post

Using Scrolling Panels in E-Learning (2020) #273