Scroll bar white space in Articulate 360

Have not heard of this issue, are you at all able to share your file?

Hi Mark

are you using IE by any chance? I recall seeing this issue with HTML5 output and from memory it was only occurring in IE. I'll see if I can find the post.

Here is the post Mark

Hi Wendy

Yes it appears to have been the HTML5 issue with IE. Seems to be fixed now :)

Good to know

Any updates on the above issue..

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! 

Hi,

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.

HELP :)

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

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.

You can load jquery when the modules starts, I could never get that code to work though