Custom Scroll Observer - vue-use-active-scroll

Install & Download:

# NPM
$ npm i vue-use-active-scroll

Description:

An alternative to the Intersection Observer. Great for scrollspy, sticky navbar, and table of contents.

The vue-use-active-scroll implements a custom scroll observer in your Vue applications, which automatically adapts to any type of scroll behaviors and interactions and always returns the “correct” active target.

Features:

Precise and stable at any speed
CSS scroll-behavior or JS scroll agnostic
Adaptive behavior on mount, back/forward hash navigation, scroll, click, cancel.
Customizable boundary offsets for each direction
Customizable offsets for first/last targets
Customizable behavior on top/bottom reached
Supports custom scrolling containers

How to use it:

1. Install and import the useActive.

import { useActive } from 'vue-use-active-scroll'

2. Implement the custom scroll observer.

<!-- Content Sections -->
<h2 id="Section-1">Section One</h2>
<p>Section One Content</p>
<h2 id="Section-2">Section Two</h2>
<p>Section Three Content</p>
<h2 id="Section-3">Section Three</h2>
<p>Section Three Content</p>

…

<!-- Anchor Links In Menu Or Sidebar -->
<a href="#section-1">
  Section One
</a>
<a href="#section-2">
  Section Two
</a>
<a href="#section-3">
  Section Three
</a>

const links = ref([
  { href: 'section-1', label: 'Section One' },
  { href: 'section-2', label: 'Section Two' },
  { href: 'section-3', label: 'Section Three' }
])
const targets = computed(() => links.map(({ href }) => href))
const { isActive } = useActive(targets)

3. Available props.

const { isActive, setActive } = useActive(targets, {
  root: null, // HTMLElement | null
  jumpToFirst: true,
  jumpToLast: true,
  overlayHeight: 0,
  minWidth: 0,
  replaceHash: false,
  edgeOffset: {
    first: 100,
    last: -100,
  },
  boundaryOffset: {
    toTop: 0,
    toBottom: 0,
  },
})

Preview:

Changelog:

v1.1.1 (09/21/2023)

Fixed a regression introduced in 1.1.0 where using isActive would throw an error on the server
Added useActiveScroll as export alias
Added new, better types generation workflow

v1.0.0 (03/25/2023)