πŸš€Β Β 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.

Keywords:

  • astro
  • astro-component
  • scroll
  • observer
  • html
  • viewport
  • css
  • toggle
  • scrolling
  • position
  • document
  • watch
  • window

πŸš€Β Β Astro β€” Scroll observer

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

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/use-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

Changelog

Change Log

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

0.5.1 (2022-10-17)

Bug Fixes

  • broken global selector (ca6aaba)
  • docs links, relative to absolute (4737876)
  • git repository url (828dd50)
  • remove package prefix, simplify import method (73bd31b)

0.10.20 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.19 (2022-08-20)

Bug Fixes

  • docs links, relative to absolute (4737876)

0.10.18 (2022-08-06)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.17 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.16 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.15 (2022-07-30)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.14 (2022-07-24)

Bug Fixes

0.10.13 (2022-07-18)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.12 (2022-06-28)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.11 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.10 (2022-06-25)

Bug Fixes

  • prefer template strings (8c552ee)

0.10.9 (2022-06-24)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.8 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.7 (2022-06-21)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.6 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.5 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.4 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.3 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.2 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.1 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-scroll-observer

0.10.0 (2022-06-19)

Features

  • init app scroll observer component (4df9395)
...

Licenses

Package
Author
License
URL
lodash-es
John-David Dalton <john.david.dalton@gmail.com>
MIT

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.