Show scroll bars

#1

I have a scrollable dynamic panel and I would like to vertical scroll bars to show all the time otherwise it’s not obvious that the content is scrollable. Is there a way of doing this?

#2

You can specify a few scrollbar options in the STYLE panel (or by right-clicking a dynamic panel widget) including “Scroll Vertical” and/or “Scroll Horizontal” which will display the scrollbar–as long as the content in your dynamic panel state is longer (for vertical) or wider (for horizontal) than the dynamic panel–meaning there is a reason to scroll it.

Here is an Axure reference tutorial explaining how to do this:

The tutorial only shows an example with the “traditional” prototype viewer (used for the HTML in the browser), which will always show a “traditional” scrollbar with trough and handle. The new “mobile” prototype viewer will typically only show the scrollbar at load and upon touching/scrolling it. Then the scrollbar will fade away after a second or so. The new (in RP9) “mobile” prototype viewer is used whenever the Page Style specifies a height. You can set a page width without a height to get the traditional prototype viewer.

If you really need the mobile prototype player, you might be able to apply a CSS extension (in Axure Cloud) or “javascript injection hack” to ensure the scrollbar is always shown. This stackoverflow thread shows a solution:

body {
overflow: scroll;
}

…You’d need to apply this property to your dynamic panel widget. Search this forum for “Axure Cloud CSS” or “javascript injection css” for details if you need. Or, create a new post with this question …something like “Apply CSS to dynamic panel to style the scrollbar?”

A lot of the prototypes I make are for custom embedded UIs, so I have had to build a custom scrollbar and behavior. Rather than true scrolling, I “fake it” by moving the content within the dynamic panel using the Dragged event (which works great for touchscreen UIs and “remote control” UIs such as an accessibility keyboard or touch stick.) The scrollbar can then be styled as I need, shown always or whenever I need. It’s a bit of a trick to size the scroll handle appropriately and move it the right amount in the opposite direction from the content, but once I worked out the math for it is easy enough to duplicate when I need it. I can dig up an example if you need.

#3

Thanks for that. I did manage it in the end by adding this to a plugin and loading it in the section:

<style>
  ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .3);
  box-shadow: 0 0 1px rgba(255, 255, 255, .3);
}
</style>

That seems to be working fine… at least for testing.