Viewport scroll position and direction watcher. Binds states data attributes to `HTML` for further JS/CSS usage. Scroll event is throttled for performance economy.
npm install 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)?
With this tool, you can easily hook up and animate UI components like:
Scroll hints, back to top button, top navigation menu bar…
``sh`
pnpm i astro-scroll-observer
`astro`
---
import { ScrollObserver } from 'astro-scroll-observer';
// ...
---
`astro
`
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;
// ...
}
}
`
`css`
[data-is-scrolling-up='true'][data-is-top='false'] .my-element {
opacity: 1;
}
`html data-is-scrolling-up="true|false"
data-is-bottom="true|false"
data-is-top="true|false"
data-has-scroll="true|false"
>
`
- Create JS hook like app/Breakpoints/use-breakpoints.ts
- Provide mixin option for scroll bar presence detector