Dynamic Panel - Scrollbar

newbie-question

#1

Does anyone know if you can change the look of the default scrollbar - the one in Axure is not quite as our design and I would like to customize it?


#2

Hi!

There’s not a good way to customize it, but you could use a fake one that feels like the real thing. See Custom scroll bar only working on Scroll Up?. (I updated the file at the bottom of this post.) You might want to read the posts leading up the linked posts above to it to see how it works, but here’s basically what you do.

  • Set the size of “scrollbar_clipper-panel” to the desired size of the dynamic panel. This is what hides the real scrollbar and determines the size of the DP inside of your prototype. You don’t need to resize the inner panel, as code will do that for you.
  • Put your content in “scrolling_panel” which is inside the panel above
  • Set the size of the “contentArea_hotspot” to match the size of the content in that panel
  • Change the look of the scrollbar by changing the content of “scrollBarHandel_panel.” Note that this panel has On Sized code that sizes the rectangle to match the height of the panel, since the height of the panel will change depending on the height of your dynamic panel as well as the height of the content. You can just style this rectangle. Note that to change the width, you also want to change the width of the panel.
  • If you can’t accomplish your styling with a single widget, you will have to update the resize code.
  • Also, there are two text widgets that I’m using as variables, which you can hide but don’t delete them… Set the text of v_offsetFromRightEdge (currently set to 5) to change how far from the right edge the scrollbar sits.

I updated the file below. The file is Axure 8, but it works in 9. If you want the scrollbar to automatically hide and show like real ones do, I can add that for you.

Preview

fake_scrollbar.rp (77.5 KB)


#3

Thank you josephxbrick, for giving great explanation.


#4

josephxbrick, thank you for the great explanation - this is what I was looking for.