spz-scrollbar 滚动条

• 需要展示长内容区域的滚动进度，例如文章阅读进度条。
• 需要为可滚动容器添加自定义分步翻页按钮，逐步浏览内容。
• 需要将特定子元素滚动至容器可视中央位置。

为一个可滚动容器绑定进度条，滚动内容区域时进度条宽度实时更新。

<div class="scrollbar-demo">
  <div id="spz-scrollbar-base-container" class="scrollbar-scroll-box">
    <p>滚动条组件会追踪容器内的滚动进度，并通过模板渲染进度条或导航按钮。</p>
    <p>向下滚动此区域，观察下方进度条的变化。</p>
    <p>该组件支持垂直和水平两种滚动方向，可通过 scroll-direction 属性切换。</p>
    <p>模板数据包含 progress（0-100 的进度值）、step（当前步骤数）、hasPrev 和 hasNext 标志位。</p>
    <p>可以结合 next / prev 方法，配合自定义按钮，实现分步滚动控制。</p>
    <p>组件会自适应绑定容器的滚动事件，当容器无滚动条时自动降级为监听页面滚动。</p>
  </div>
  <spz-scrollbar id="spz-scrollbar-base" layout="container" container="spz-scrollbar-base-container">
    <template>
      <div class="scrollbar-track" style="width: ${progress}%"></div>
    </template>
  </spz-scrollbar>
</div>

通过 next 和 prev 方法按固定步长滚动容器，并利用模板中的 hasPrev / hasNext 数据控制按钮的禁用状态。

<div class="scrollbar-api-demo">
  <div id="scroll-content-box" class="scrollbar-api-scroll-box">
    <p>点击「上一步」和「下一步」按钮，以固定步长滚动此区域的内容。</p>
    <p>next 方法将容器向下滚动一个步长；prev 方法向上滚动。</p>
    <p>步长由 step 属性控制，默认将总滚动距离等分为 5 步。</p>
    <p>进度条实时反映当前滚动位置。按钮在到达边界时自动变灰。</p>
    <p>scrollToTarget 方法支持将指定子元素滚动至容器中央。</p>
    <p>组件不依赖原生滚动条，UI 完全通过模板自定义。</p>
  </div>

  <spz-scrollbar
    id="spz-scrollbar-api-usage"
    layout="container"
    container="scroll-content-box"
    step="5"
  >
    <template>
      <div class="scrollbar-api-controls">
        <button
          class="${hasPrev ? '' : 'is-disabled'}"
          @tap="spz-scrollbar-api-usage.prev()"
        >上一步</button>
        <div class="scrollbar-api-track-wrap">
          <div class="scrollbar-api-track" style="width: ${progress}%"></div>
        </div>
        <button
          class="${hasNext ? '' : 'is-disabled'}"
          @tap="spz-scrollbar-api-usage.next()"
        >下一步</button>
      </div>
    </template>
  </spz-scrollbar>
</div>

将容器向下（或向右）滚动一个步长的距离，不需要参数。

将容器向上（或向左）滚动一个步长的距离，不需要参数。

将容器内指定的子元素滚动至容器的可视中央位置。