Scrollbars in HTML5 output
Jul 07, 2017
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:
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:
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
Hi Ray!
Those scrollbars certainly match the way Flash vs HTML5 browsers display as well.
Hopefully someone in the community will be able to chime in and assist if they have any experience with changing this.
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.
Hi there, I've been having the same issue as the scrollbar doesn't have any arrows to navigate the scrollbar. Is there any update to this or a way to change the look of the scrollbar?
Thanks!
Hi Jaclyn,
No updates yet to the way the scrollbar is displayed in Storyline's HTML5 (or Flash) output - but you can navigate the scroll bar by clicking on it and dragging up and down.
The HTML5 experience is very similar to what you'd see on a mobile device when scrolling in a website or similar.
This discussion is closed. You can start a new discussion or contact Articulate Support.