Scroll bar problem in IE

Aug 07, 2017


I get a lot of extra space at the bottom of my content in scrollbars. This only happens in IE. Chrome works fine.

Any one can help me on this.


13 Replies
Katie Riggio

Good morning, Kai!

That extra space seen at the bottom of scrolling panels is a result of an issue in Internet Explorer and Microsoft Edge, not Storyline. Here's a helpful resource on this bug:

Until Microsoft fixes the problem, you can avoid it by:

  • Switching to another HTML5 browser, such as Chrome or Firefox
  • Shortening the text, so it will not overlap the scrolling panel
  • Though code is outside our comfort zone, here's a community example that modifies the CSS: Arkadiusz's Code
Kai Lam

Thanks Katie. Tried the code fix but wasn't able to resolve it in that way either...

Chung Kai Lam, MBA
Senior Learning Technologist
Pronouns: He, him, his, himself
Human Resources | OD & Learning
Mobile: 857-205-6890

The information in this e-mail is intended only for the person to whom it is
addressed. If you believe this e-mail was sent to you in error and the e-mail
contains patient information, please contact the Partners Compliance HelpLine at . If the e-mail was sent to you in error
but does not contain patient information, please contact the sender and properly
dispose of the e-mail.

Katie Riggio

Oh no, Kai!

I'm sorry to hear that solution didn't work. Have you had a chance to try Steven's modified code?

I put the following code in a JavaScript trigger that executes when the page or layer containing the scrolling panel starts:

//jQuery/css so Scrolling Panel displays correctly in IE and Edge

$(".scrollarea-area svg").css({"position": "relative", "display": "block", "overflow": "hidden", "pointer-events": "none"});

Although code is outside our comfort zone, we're happy to see what you set up so far and recommend any tailored suggestions on where to go next. You can always share your file with our Support team through this private upload link.

By the way, it looks like you may have replied by email where your contact info came through to the public forum. Feel free to edit it out through this link

Santhosh Kumar

Dear All,

Myself I have found the solution for this. 

Go to html5 folder > lib folder > stylesheets folder > main.css

change the below css overflow:scroll

slide-object svg{position:relative;display:block;overflow:visible;pointer-events:none}

Please change visbile to overflow:scroll

This will work

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