Scroll bar white space in Articulate 360

Nov 14, 2017

Hi all

working in Articulate 360, an issue has come up where we have text in a scroll bar panel however when we publish it, there is a lot of white space underneath. We have tried adjusting the text spacing etc within the course and it doesn't seep to help. Has anyone had this issue?


11 Replies
Ashley Terwilliger-Pollard

Hi Sanjay,

The issue was reported to our team where space is added below a long text inside a Scrolling Panel when the slide is viewed in Internet Explorer or Microsoft Edge.

As they took a look at the behavior, it was determined to be a known issue with how IE and Edge are displaying scrolling panels in HTML5 output. Both browsers often add extra padding to the bottom of scrolling panels so there can be a significant amount of blank space after your content.

Until Microsoft fixes the problem, you can avoid it by viewing the Flash version of your content or switching to another HTML5 browser, such as Google Chrome or Firefox.

Note: You'll also see extra space at the end of scrolling panels in CD-published output since it relies on Internet Explorer.

Hope that helps clarify! 

Joel Carmona


I try to debug the output(story_html5.html), and I think it is a success.

You need to create a trigger "Execute Javascript" when timeline starts (Base Layer, or layer itself). Paste the Jquery code below:

$(".scrollarea-area div").css("overflow", "hidden");
$(".base-layer div").css("overflow", "visible");

Note: You need to create the trigger in places that you have a scrolling panel. If you have a scrolling panel in the base layer, the trigger should be in the base layer. If you have a scrolling panel in a layer, you will also need to have the trigger in the layer. Different trigger for Base Layer and Layers. If you have a three layers with scrolling panel, each should have the trigger.

I tried to have the trigger in the Slide Master, but it won't work.

I am attaching the source file and sample output for your reference.

Hope this will work on your end.

I think the issue is not from the IE. The root of the bug is in the CSS for the scrolling panel in the Storyline 360 output.


Christina Thurston


Hi, I am having this same issue in SL360 for a source file that I published both to HTML5 and HTML5 with Flash fallback (tried both ways still has space in IE). This is the classic player if this matters.

I tried the trigger provided above in Joel's post on a base layer scroll and I also tried another line of code I found on another link and neither work for me. Can anyone provide me with another work around suggestion? Thank you.

Note: I see two lines of code in the above post but then Joel only uses one in the source file example. I tried using both and then just the one like he has in his example source file.

I tried the below (one at a time) in a trigger that says Execute JavaScript (pasted below code) when the timeline starts on this slide.

tried first: $(".scrollarea-area div").css("overflow", "hidden");
$(".base-layer div").css("overflow", "visible");

then: $(".scrollarea-area div").css("overflow", "hidden");  (like in his file)

and then from a prev post I tried this: $(".scrollarea-area svg").css({"position": "relative", "display": "block", "overflow": "hidden", "pointer-events": "none"});

Christina Thurston

Another thing to note, I republished Joel's example in 360 and it does not work either. I see on some other threads that Jquery no longer works in the latest versions of storyline 360 so that may the reason? Any other solutions? My company's default browser is IE so 70K employees will be taking the training and I am sure someone will notice the gap in the scroll and request an edit.

This discussion is closed. You can start a new discussion or contact Articulate Support.