Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to design custom scrollbars in your interactive wireframes

Design custom scrollbars in your interactive wireframes with the help of this tutorial.

  1. Drag a Dynamic panel onto the canvas.
  2. Double click on it to edit its content, and drag some widgets inside the panel, taller than the dynamic panel itself.
  3. Group them all inside another dynamic panel (‘group in dynamic panels’), and resize the dynamic panel it to match the original dynamic panel.
  4. Now you need to draw the scrollbar on the right hand side of the panel. First, add the scroll bar arrows. You can use the ‘Up’ and a ‘Down’ arrow widgets from the iOS8 Icons widget library, which you can easily add to your wireframing tool. Then, drag a Dynamic panel to fill the gap between the two arrows. Add a border for it in the Properties tab.
  5. Double click on the bar’s Dynamic panel and draw a rectangle inside it. 
  6. Select the rectangle, then go to the ‘events’ tab and add an ‘On drag + Move’ event.
  7. In the properties, check the option ‘constraint by parent‘ and configure it so it only moves along the y axis, i.e. select “Current” as the Left value and “With cursor” as the Top value. Click OK.
  8. Now select the top arrow. Go to the events tab and add another ‘On click + Move’ event.
  9. Select the rectangle that is inside the scroll bar’s dynamic panel. Set ‘Offset’ and write ‘0’ in the Left value and ‘-10’ in the Top value. Select the option ‘constraint by parent’ as well. Click OK. 
  10. Now click on the gear icon next to the word ‘Do’ and select ‘add action’. Select ‘On click + Move’, then select the dynamic panel that has the content and select by offset. Write ‘0’ in the Left value and ’10’ in the Top value. Click OK.
  11. Do the same for the bottom arrow: go to the events tab and add another ‘On click + Move’ event. Select the rectangle that is inside the scrollbar’s Dynamic panel. Set ‘Offset’ and write ‘0’ in the Left value and ’10’ (instead of -10) in the Top value, select the option ‘constraint by parent’ and click OK. Add a further action: select ‘On click + Move’, then select the dynamic panel that has the content and select ‘Offset. Write ‘0’ in the Left value and ‘-10’ (instead of 10) in the Top value. Click OK.

And that’s it! You can now click on Simulate and enjoy!

7 Comments

  1. shikha

    June 5, 2015 at 6:02 pm

    Hi,
    I am using justinmind and I put a radial figure using html widget but the figure on the screen is with the scroll bars.I adjusted the size of the figure still the scroll bars are there.
    Kindly suggest me what to do.

    Thanks.

    • Lidia Rodriguez

      July 3, 2015 at 10:19 am

      Hi Shikha, if the HTML figure is bigger than the widget itself, the scrollbars will appear. Try to increase the widget’s size.

  2. Prafull Says :

    October 22, 2015 at 3:44 pm

    Hi,
    I am using justinmind and I am unable to find a Dynamic panel option???
    Kindly suggest me what to do.

    Thanks.

    • Danielle Schneider

      October 22, 2015 at 9:41 pm

      Are you using the free version? Dynamic panels are not included in the free version – only the Pro version.

      • Prafull Says :

        October 23, 2015 at 9:28 am

        Thank You. Is there any way to add scroll bar using free version

        • Danielle Schneider

          October 24, 2015 at 4:17 am

          Any page you create has a scroll bar as long as vertical scrolling is not disabled. Besides the base screen on the page, there is no other way to do that in the free version.