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!

Just an idea, but you could try adding a full screen hot spot or transparent image to the area the user would have to hover over in order to end scrolling. Create a trigger that changes the state of the arrow when the user hovers of said hot spot/image. I tried this in SL 3 (I don' t have access to 360) with an image and it worked.

I don't consider this to be a critical issue. This rather convoluted technique exists only because of a lack of triggers specific to a scrolling panel. Good triggers would be: When an object is visible in a panel When an object ceases to be visible in a panel When the bottom of the panel has been scrolled to A visible state would also be good so we can make things occur whilst an item is visible.

There is no trigger or condition that allows you to check the scrolling state of a scrolling panel. This may not work for you, but you could force the user to click some kind of acknowledgement at the bottom of a scrolling panel as shown in this example here.

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

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 CONTAINERbtnPos = scrollbarBtn.getBoundingClientRect().bottom - offset;slideContainerPos = slideContainer.getBoundingClientRect().bottom - offset; //CALCULATE DISTANCE BETWEEN BOTTOM OF SCROLLBAR AND SLIDE CONTAINER AS PERCENTAGEposCalc = (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 beif (posCalc > 80) { player.SetVar('scrollAtBottom', true); document.removeEventListener('mouseup', checkScrollbarPosition); }}document.addEventListener('mouseup', checkScrollbarPosition);

Scrolling panel with trigger | Articulate

39 Replies

Jean-Guy-Boulay
Community Member
3 years ago
I can confirm the bug still exists.
- JoseTansengco
  Staff
  3 years ago
  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!
  - Jean-Guy-Boulay
    Community Member
    3 years ago
    
    Submitted, but Simon's JS solution is a fine work around.
    Edit: I think the user account name has changed to GavinElliott-89 from Simon JS.
ChrisHampson-b2
Community Member
2 years ago
Does this feature work now?

It would be so versatile to be able to have a scrolling panel that would allow objects to trigger events on collision with a static background object.
- JoseTansengco
  Staff
  2 years ago
  Hi Chris,
  
  We're still tracking the feature request for the addition of a trigger that activates the end of a scrolling panel. I've added your voice to the request, and we'll leave a message here as soon as it makes it to our product roadmap!
  - FredGood
    Community Member
    10 months ago
    Following this one! :)

Forum Discussion

Scrolling panel with trigger

39 Replies

Related Content

Scrolling Panel Weird Issue

Storyline 360: Working with Scrolling Panels

I need the scroll panel scroll bar start at the bottom and scroll up.

Working with Triggers in Storyline

Vertical Storyline Scrolling

Learn

Connect

Discover

Community

Company

Trust Center