astro-scroll-observer
v0.5.3
Published
Viewport scroll position and direction watcher. Binds states data attributes to `HTML` for further JS/CSS usage. Scroll event is throttled for performance economy.
Downloads
248
Maintainers
julian.cataldoReadme
🚀 Astro — Scroll observer
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
pnpm i astro-scroll-observer🛠 Usage
---
import { ScrollObserver } from 'astro-scroll-observer';
// ...
---<!-- ... -->
<head>
<!-- Place component inside `HEAD` tag -->
<ScrollObserver />
<!-- ... -->
</head>With SCSS
Firstly, import SCSS mixin in astro.config.mjs:
export default defineConfig({
// ...
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "astro-scroll-observer/scss" as *;
`,
},
},
},
},
// ...
});Then, use it like this in your stylesheets:
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;
// ...
}
}With vanilla 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"
>
<!-- ... -->
</html>
<!-- ... -->To do
- Create JS hook like app/Breakpoints/use-breakpoints.ts
- Provide mixin option for scroll bar presence detector
LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋
