Programmatic Scroll Marks

Usually, StringTune logic is anchored to elements via the string="something" attribute. However, sometimes you need an event to fire or a class to toggle when the page passes an exact pixel offset, regardless of what's currently in the DOM.

StringTune provides a robust internal observer for these cases via addScrollMark.

Usage

You can register a ScrollTriggerRule on the instance:

import StringTune, { ScrollTriggerRule } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

const trigger: ScrollTriggerRule = {
  id: 'menu-background-trigger',
  offset: 300, // Trigger at 300px from the top
  direction: 'any', // trigger scrolling forward or backward
  onEnter: () => {
    console.log("Passed 300px mark!");
  },
  onLeave: () => {
    console.log("Scrolled back above 300px!");
  },
  toggleClass: {
    target: document.body,
    className: 'is-scrolled'
  }
};

stringTune.addScrollMark(trigger);

How It Works

• offset: The exact threshold in scroll container pixels.
• direction: Can be 'forward', 'backward', or 'any'.
  • If 'forward', onEnter fires when you scroll down past the mark, and onLeave fires if you scroll back up past it.
• toggleClass: A convenient built-in way to toggle a class on any DOM target automatically when the condition is met, without writing onEnter / onLeave handlers manually.

Managing Memory

To clean up a scroll mark (for example, when a component unmounts in a React or Vue app), just call removeScrollMark with the identical id:

stringTune.removeScrollMark('menu-background-trigger');