Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Support
  • Download

›The Basics

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

Scrolling Region Tutorial

In this tutorial, you'll learn how to use a dynamic panel to make a region of the page that scrolls independently of the rest of your design.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a heading 1 widget onto the canvas from the Libraries pane.

  3. Place an image widget and three paragraph widgets in a column below the heading.

    Tip

    You can automatically align and distribute widgets by selecting them and using the Align and Distribute options at the top of the interface.

2. Place the Widgets in a Scrollable Dynamic Panel

  1. Select all the widgets on the canvas.

  2. Right-click the selection and select Create Dynamic Panel in the context menu.

  1. Set the new dynamic panel's height to 300, which will cut off some of the paragraph widgets.

  2. In the Dynamic Panel section of the Style pane, select Scroll Vertical in the scrolling dropdown.

3. Preview the Page

Preview the page and scroll the dynamic panel up and down.

Additional Information and Tips

Scrollable Table with Fixed Header

You can use a scrollable dynamic panel to create a scrollable table with a fixed header. Create your table header out of rectangle widgets and place the table widget below them. Then, place the table in a scrollable dynamic panel and shorten the panel so that only a few rows of the table are visible. Scrolling the dynamic panel will give the appearance of scrolling table rows with a fixed header.

← Full Width Image or BannerRotating Carousel / Slideshow →
  • 1. Widget Setup
  • 2. Place the Widgets in a Scrollable Dynamic Panel
  • 3. Preview the Page
  • Additional Information and Tips
    • Scrollable Table with Fixed Header
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
Axure RP 10Axure CloudEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense Portal
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 9 Documentation and Tutorials
Copyright © 2002–2023 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.