Scrollbars in HTML5 output

We're noticing that the scrollbars in our Storyline courses don't really look like scrollbars in the published output when we publish to HTML 5 with Flash fallback.

Here's how the scrollbar looks in Flash:

Scrollbar in Flash Output

This is a correct/standard scrollbar in my view: it has the arrows on top and bottom, has squared edges, and the little detentes on the scroll button itself. This is what I think most people are used to seeing.

Here's what it looks like when I publish to HTML 5:

Scrollbar in HTML 5

We added a callout ("Scrollbar!") and arrow because we weren't sure people would even recognize that thin little thing on the right as a scrollbar. It doesn't have arrows on top or bottom; it doesn't have squared edges; it's much narrower than the Flash version's scrollbar; and has no detente lines on the scroll button itself. The button looks like a little dot instead of a scrollbar slider.

Also, in the Flash scrollbar, if I click the scrollbar, I can scroll up or down with the wheel on my mouse. But in the HTML 5 scrollbar, I cannot--I have to click the content area in order to use the scroll wheel on my mouse--if I click the scrollbar itself, the scrollbar stops responding to the wheel.

I realize these might be "features" of HTML 5, but I am wondering if there is any way to get the look and behavior of the Flash scrollbar in HTML 5? Can the look be changed via CSS to match the "classic" Flash look?

Has anyone got CSS entries they could share here that does this? Are there any plans for Articulate to give us more options for how the scrollbars look and behave in HTML 5?

Thanks!

    -Ray

4 Replies
Frances Jones

Hi Ray, I find the html5 scrollbar in the scroll panel frustrating, as it is so narrow and you don't seem to be able to change the size or formatting of it.  I will probably adopt your "Scrollbar" text and arrow to make it more obvious to learners.  Sorry I don't know any CSS fixes.  Would be interested to hear if anyone else does.