Page Scrolling Progress Indicator

newbie-question
mobile-prototyping
#1

Hi,

I’m wanting to create a scrolling indicator below the header. As the user scrolls down a page they can see the progress and how much of the page is left. Basically I would like this example: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

Any help would be appreciated. Thanks!

#2

Hi!

To do this, you’ll need to know how much possible vertical scrolling there can be. Then you divide the current scrollY by that, which results in a value between 0 and 1, meaning 0 when scrollY is 0, and 1 when scrollY is at its maximum scroll. Then you take that 0-to1 value and multiply that by the maximum width of the slider.

Here I have a pinned dynamic panel called “sliderPanel” inside of which is another DP that will serve as the slider, called “slider”. We have to know the total height of the page, so I placed a hotspot at the bottom of the page called “pageBottom”.

You’ll need to use some local variables here, but the formula for the width (based on the above) of the slider is:

Set Size of slider to (width) = [[Window.scrollY / (LV_pageBottom.bottom - Window.height) * LV_scrollerPanel.width]], (height) = 12

… where LV_pageBottom is a local variable pointing to the hotpsot and LV_scrollerPanel is the pinned-to-browser panel that contains the slider. The latter’s width is the maximum width of the slider, and (LV_pageBottom.bottom - Window.height) gives us the possible scrollable range.

Note that OnWindowResize I fire the event OnWindowScroll, since that affects the scrollable area.

Preview

File: scrollIndicator.rp (54.7 KB)

#3

Awesome! Thank you so much!

#4

Glad it helped. Note that if you want the slider to go full browser width, right-click the (outer) panel “sliderPanel” and set it to 100% browser width. Then set the page alignment of the prototype to “center”. The result would look like this.

#6

Thanks again for your help. I’m running into an issue where I have a side navigation and need to utilize a dynamic panel to make the area scrollable. It doesn’t seem the Interactions seem to recognize the dynamic panel state. What alterations would need to be made to make this work in a dynamic panel? I’m attaching my file so you can see what I’m working with. WZ.rp (297.7 KB)