/locus-dom

Low-level DOM element position observer.

Primary LanguageTypeScript

locus-dom

locus-dom is a Low-level DOM element position observer. It uses mutation observer and a few global event hooks to detect potential changes to a DOM element's absolute position as a result of the following:

  • Programmatic changes in content and styles
  • Window resizing
  • Window scrolling and scrollbox scrolling
  • Hovering on an element
  • Focusing on an element
  • Checking an element

Installation

npm install locus-dom

Usage

import { Locus } from "locus-dom";
const locus = new Locus({
  target: document.getElementById("my-target"),
  handler() {
    return locus.state; // e.g. { top : 10, left : 20 }
  }
});

locus.start(); // start observing
locus.stop(); // stop observing

When you are no longer interested in the DOM element's position, you must at some point call stop() in order for it to be removed from a registry of active loci. Failing to do so may result in a memory leak.

Demo

  • Clone the repository
  • Run npm install and then npm start.
  • The demo is served at port 9001.