Alpine JS Scroll Amount

Track the users scroll position and their progress on the page 🤿

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-scroll-amount@latest/dist/scroll-amount.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-scroll-amount

npm install -D alpinejs-scroll-amount

import Alpine from 'alpinejs'
import scrollAmount from 'alpinejs-scroll-amount'

Alpine.plugin(scrollAmount)

Alpine.start()

Example

<div
  x-data="{ scrollPos: {} }"
  x-init="scrollPos = $scrollAmount"
  x-on:scroll.window="scrollPos = $scrollAmount"
>
  <span
    class="h-px bg-green-500"
    :class="{ 'bg-green-600': scrollPos.atEnd }"
    :style="{ width: `${scrollPos.scrollPercent}%` }"
  >
  </span>

  <article> ... </article>
</div>

This is a basic example of showing a progress bar based on the user scroll.

Data Returned

return {
  scrollPx: 0,
  scrollPercent: 0,
  atStart: true / false,
  atEnd: true / false,
}

Stats