🚀  Astro — Scroll observer

!Downloads

Viewport scroll position and direction watcher.
Binds states data attributes to HTML for further JS/CSS usage.
Scroll event is throttled for performance economy.

Scroll states are:

- Which current area? TOP, BOTTOM, and everything in-between (with a bit of margins).
- Is user scrolling UP or DOWN?
- Is viewport scrollbar present (i.e. is vertical viewport overflowing)?

What for ?

With this tool, you can easily hook up and animate UI components like:
Scroll hints, back to top button, top navigation menu bar…

📦  Installation

``sh
pnpm i astro-scroll-observer
`

🛠  Usage

`astro
---
import { ScrollObserver } from 'astro-scroll-observer';
// ...
---
`

`astro






`

$3

Firstly, import SCSS mixin in astro.config.mjs:

`js
export default defineConfig({
// ...

vite: {
css: {
preprocessorOptions: {
scss: {
additionalData:
@use "astro-scroll-observer/scss" as *;
,
},
},
},
},

// ...
});
`

Then, use it like this in your stylesheets:

`scss
nav {
@include scroll-is($bottom: true, $top: true, $going-up: false) {
opacity: 0;
transform: translateX(100%);
// ...
}
}

.scroll-down-hint {
@include scroll-is($top: true) {
opacity: 1;
// ...
}
}
`

$3

`css
[data-is-scrolling-up='true'][data-is-top='false'] .my-element {
opacity: 1;
}
`

🎉  Result

`html

data-is-scrolling-up="true|false"
data-is-bottom="true|false"
data-is-top="true|false"
data-has-scroll="true|false"
>



`

To do

- Create JS hook like app/Breakpoints/use-breakpoints.ts
- Provide mixin option for scroll bar presence detector