spz-scrollbar#

#When to use

spz-scrollbar provides a custom scroll progress indicator with step-based navigation for any scrollable container. It exposes template data (progress, step, etc.) for flexible UI rendering.

#Supported layout

• container

#Example

<div id="scroll-content" style="height:400px;overflow:auto;">
  <!-- long content -->
</div>

<spz-scrollbar id="scrollbar" layout="container" container="scroll-content" step="5">
  <template>
    <div class="progress-bar" style="width:${data.progress}%"></div>
    <button @tap="scrollbar.prev" disabled="${!data.hasPrev}">Prev</button>
    <span>Step ${data.step}</span>
    <button @tap="scrollbar.next" disabled="${!data.hasNext}">Next</button>
  </template>
</spz-scrollbar>

#Attributes

#Template data

The component provides the following data to its child template:

#Actions

#next

Scroll to the next step position.

#prev

Scroll to the previous step position.

#scrollToTarget

Scroll the container so that a specific target element is visible.

Parameters:

• src or target (string): CSS selector of the element to scroll to

Example:

<button @tap="scrollbar.scrollToTarget(target='#section-3')">Go to Section 3</button>

#Behavior

• If the container element itself does not scroll (content fits), the component falls back to observing body scroll within the container's viewport region.
• The component automatically recalculates when the container is resized (via ResizeObserver).

#Notes

• This component does not emit custom events.