https://github.com/markmead/alpinejs-scroll-amount
Track the users scroll position and their progress on the page 🤿
https://github.com/markmead/alpinejs-scroll-amount
alpine-js alpinejs alpinejs-plugin alpinejs-scroll javascript-scroll
Last synced: 12 months ago
JSON representation
Track the users scroll position and their progress on the page 🤿
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-scroll-amount
- Owner: markmead
- License: mit
- Created: 2022-10-29T12:28:35.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:14:46.000Z (over 1 year ago)
- Last Synced: 2025-04-10T23:30:19.471Z (about 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, alpinejs-scroll, javascript-scroll
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/utility-scroll-amount
- Size: 21.5 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Scroll Amount
Track the users scroll position and their progress on the page 🤿
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-scroll-amount
npm install -D alpinejs-scroll-amount
```
```js
import Alpine from 'alpinejs'
import scrollAmount from 'alpinejs-scroll-amount'
Alpine.plugin(scrollAmount)
Alpine.start()
```
## Example
```html
...
```
This is a basic example of showing a progress bar based on the user scroll.
### Data Returned
```js
return {
scrollPx: 0,
scrollPercent: 0,
atStart: true / false,
atEnd: true / false,
}
```
## Stats
