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

To do

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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.5.3 (2023-01-05)

Bug Fixes

remove npm exports (buggy inside astro conf) (e888864)

0.5.2 (2022-11-19)

Note: Version bump only for package astro-scroll-observer