How to use an "anchor" to hide/show component when scrolling

Instead of using scrollbars, I want to use an arrow to indicate more text within a scrollable dynamic panel.

Once the user has scrolled to the bottom (or top) of the scrollable text, I want to hide the arrow indicator.

When the user scrolls again and the text at the bottom (and/or top) is hidden again, I want to be able to redisplay the arrow indicator(s).

I have tried using an “over area” check, but this does not seem to work.

Any help would be most appreciated.

scrollAnchors.rp (67.4 KB)

1 Like

Your approach and setup makes sense. I think it should work, but it just does not in Axure. I’m not sure why not, but my guess is the code knows your arrow widget is over the dynamic panel–but that dynamic panel is essentially a “black box”. Either the location properties of widgets inside that dynamic panel are not available, or because they do not change (their position is relative to the dynamic panel, so they don’t actually “move” when the DP is scrolled) they are never detected by the “area is over” logic.

Another approach is to test the “.scrollY” property of the dynamic panel, which indicates how many pixels it has scrolled. To detect if the scroll has reached the bottom–the maximum amount of scroll possible–you’ll need to calculate this maximum scroll amount. So, if the content within the DP is 500 px tall and the DP is 200 px tall, the maximum scroll would be 500 - 200 = 300 px. Make sense?

Take a look at this updated RP file:
scrollAnchors.rp (99.1 KB)

I duplicated your page to “Page 2” and changed the logic of your Scrolled Down case to:
If [[This.scrollY]] is greater than or equals "[[LVAR1.height - This.height]]"
Hide More Text Indicator - Down

  • [[This.scrollY]] is an expression where “This” points to the same widget, and “.scrollY” is its amount of vertical scroll.
  • “LVAR1” is a local variable pointing to the content within the DP.
    • To get this I had to group all the widgets inside the DP (named “Dynamic Panel w/ Scroll”), which I named “content group”.

The result is when the DP has scrolled all the way down the arrow indicator is hidden. To show the arrow again, I added a case of "Else if true Show More Text Indicator - Down …and likewise for the action of Scrolled Up.

  • You could further simplify this by cut & pasting the two cases from Scrolled Down to Scrolled and deleting Scrolled Up.
  • I also added in a “debugging” action which sets the value of the global variable, OnLoadVariable to [[This.scrollY]] . This way, if you view the Console panel in Preview mode you can see the current value of the .scrollY property of the dynamic panel. This is just for debugging and demonstration purposes. You can delete this if you want.

I added a copy of your dynamic panel and altered the logic so it takes into account your “Scroll Anchor - Bottom” widget. The arrow will hide when this widget area is in the viewport (visible area) of the dynamic panel. This should achieve exactly what would happen if the “area is over” logic actually worked.

Finally, to show that your first approach works when applied to scrolling the whole page:

  • I added a “footer” widget and placed it at y = 1500 px (so the page will scroll.)
  • I added a blue arrow, created a “Page Indicator - Down” DP from it and pinned this DP to the browser so it is “sticky” at the bottom of the page.
  • I added a Window Scrolled Down event with
    If area of Page Indicator - Down is over area of footer Hide (Vertical Line)
    • So the arrow widget inside the DP is hidden/shown instead of the DP itself. When I tried hiding/showing the DP it just blinked rapidly when over the footer widget. My guess is hiding a pinned DP when scrolling conflicts with detecting its location.

Thanks mbc66!

I used your scrollY idea with a slight difference. I used the location and height of the anchor to determine how much scroll the user needed to complete to get to the bottom.

[[(scrollAnchorDown.y + scrollAnchorDown.height) - scrollableContainer.height]]

Here’s my updated working solution:
scrollAnchors.rp (81 KB)