Custom Scroll Containers

By default, StringTune listens to the global window and document.body for scroll and resize events. However, in modern Single Page Applications (SPAs) or specific layouts, you may have a fixed layout where scrolling happens inside a specific overflow: auto container.

Setting a Custom Container

You can tell StringTune to listen to a specific HTMLElement by setting the scrollContainer property on the instance.

import StringTune from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

// After your DOM or component has mounted:
const scroller = document.querySelector('.my-custom-scroller');
if (scroller) {
  stringTune.scrollContainer = scroller;
}

stringTune.start(60);

Important details

• Resize tracking: StringTune automatically sets up a ResizeObserver and MutationObserver on the assigned container to detect dimension changes and rebuild the layout calculations.
• Scroll modes: This setup fully supports the smooth and default scroll modes.

Resetting to Window

If you ever need to revert the scroll tracking back to the entire page, simply assign window to the property:

stringTune.scrollContainer = window;

This flexibility ensures StringTune gracefully fits into complex React, Vue, or Nuxt client layouts without forcing a global document scroll.