Home
Scroll
Custom Scroll Observer – vue-use-active-scroll

Custom Scroll Observer – vue-use-active-scroll

smastrom Last Updated: 2 months ago

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:

vue-use-active-scroll

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)

  • Update

v0.9.9 (02/10/2023)

  • Firefox scroll cancel – If bottom/top reached, active target is not updated

Download Details:

Author: smastrom

Live Demo: https://vue-use-active-scroll.netlify.app/

Download Link: https://github.com/smastrom/vue-use-active-scroll/archive/refs/heads/main.zip

Official Website: https://github.com/smastrom/vue-use-active-scroll

Install & Download:

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

Related Posts

Add Comment