Astro-scroll-observer NPM

🚀 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

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>
<!-- ... -->