Scroll Lock iBloc

The Scroll Lock iBloc is a custom widget that anchors any iRise widget or container in the browser while the user scrolls the page. Options include affixing elements to the right or bottom edge of the browser, and allowing ‘locked’ elements to scroll until a specified buffer is reached.

Current Version: 2.3
Supported iRise Studio Versions: 8.7 – 8.12
Supported Browsers: IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: No

What does it do?

  • Keeps any widget stationary while the user scrolls vertically within the page.
  • Optionally affixes a widget to the right and/or bottom edge of the browser window, or a specified distance from either edge.

How can I use it?

You can connect any page widget to this action with any event, but you’ll probably want the scroll lock effect applied on load. To do this, you have to create an action that is associated with the page’s onLoad event.

  1. Make sure the “Type” property for the page is set to “Page” (this iBloc does not work for mobile emulation modes), and the “Align” property is set to “Fit to window”.
  2. Right-click on a blank area of the page, and select Add Event > Action…
  3. Choose Show/Hide Widgets, and set “Select widgets to:” to Show. Select any widget on your page that is already shown by default. (This gives us something that we can connect to the iBloc)
  4. Right click on the blue line that was created and select Move To > onLoad.
  5. Drag the Scroll Lock Action iBloc onto the canvas.
  6. Drag the Show/Hide action created in step 3 onto the Scroll Lock Action iBloc to connect them.
  7. Choose the widget to lock in the properties panel.
  8. Set optional properties if desired (see below)

Can I see it work?

Tips & Tricks

  • Keep a widget from scrolling off-screen by setting a Vertical scroll buffer.
  • Anchor a tool bar or navigation panel to the bottom or right edge of the browser by selecting “Stick to right” or “Stick to bottom”

Feel free to download any of the free iBlocs here, and please tell us what you think.

2 replies
  1. Randy says:

    This iBloc works great! Is there any way to set this to anchor a widget to the left margin? My use case is I’m creating a iPad simulation with a horizontal tile stream. I would like the header of the page to stay as I swipe left and right. Right now, the header moves horizontally as well.

    Reply
    • Eric Romanik says:

      Randy, this iBloc works best for vertical scrolling in Page mode. For horizontal scrolling, you should put your scrollable content inside a section with horizontal scrolling enabled, and “Expand in Studio” send to “No (clip overflow)” or “Vertically”. Any content that you want to remain fixed should be placed outside of this section.

      More importantly for your current issue, this iBloc no longer works at all in any of the mobile (iOS, Android, or Windows Phone) emulation modes, vertically or horizontally. But since you’re always working within a fixed screen size on mobile devices, scrolling sections work just as well as the Scroll Lock iBloc. Just make sure that the content — in this case, your header element — is not inside the scrolling section.

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2013 - id8    Privacy Policy