Scroll Isolation

Prevent StringTune from intercepting scroll events on specific containers. While stringTune provides global smooth scrolling and inertia, some UI components require their own independent scroll context or custom pointer handling.

Isolation primer: Add string-isolation or data-string-isolation to any element you want to decouple from the global scroll engine. Events originating from this element (or its children) will bypass StringTune entirely.

Attributes

Attribute	Type	Default	Purpose	Practical notes
`string-isolation`	attribute	—	Stops propagation of `wheel` events to the main `ScrollManager`.	Ideal for modals, maps, or code blocks.
`data-string-isolation`	attribute	—	Alternative syntax for full HTML5 validation compliance.	Functionally identical to `string-isolation`.

Module Snapshot

Activation attribute: string-isolation
Effect: Immediately halts event bubbling to the global scroll listener.
Use cases: Modals with overflow, embedded maps (Google Maps, Mapbox), <canvas> elements with custom controls, code snippets.
Scope: Affects the element and all its descendants.

Basic Usage

Isolate a modal window's content area so users can scroll long text without inadvertently scrolling the page behind it.

HTML

<!-- Modal overlay -->
<div class="modal">
  <!-- Scrollable content area -->
  <div class="modal-content" string-isolation>
    <h2>Terms of Service</h2>
    <p>Long text that requires native scrolling...</p>
    <p>More text...</p>
  </div>
</div>

Or enable zoom/pan on an interactive map:

HTML

<div class="map-container" data-string-isolation>
  <!-- Google Maps / Leaflet instance -->
  <div id="map"></div>
</div>