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

ChrisReynolds-b
Community Member
8 years ago
I tried putting one object in the scrolling panel and another outside the scrolling panel so that when I scrolled, the first object would intersect with the second once the panel had been scrolled to the bottom.

I then added a trigger to occur when the first object intersected the second, but this led to the slide refusing to load.
- KevinCamposa863
  Community Member
  9 months ago
  Same with me!
  - StevenBenassi
    Staff
    9 months ago
    Hi KevinCamposa863!
    
    Sorry to hear you've also run into this setback!
    
    I can confirm, we are tracking this behavior as a bug in Storyline 360. This bug causes:
    
    Objects behind a Scrolling Panel, triggering an intersects interaction with objects inside the panel, causes no content to display on the Slide.
    
    I've included your voice in the bug report so we can notify you as soon as a fix is in place.
    
    Thank you for your patience. I'm sorry if this has been slowing you down!
MichaelHinze
Community Member
9 years ago
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.
- JessicaHinckley
  Community Member
  9 years ago
  Alright, I think I can make that work! Thanks!

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