StringScrollContainer

StringScrollContainer adds local smooth wheel scrolling to one container element. It is not a scroll-timeline module and it does not publish CSS variables, transforms, or custom module events.

Think of it as local scroll physics for a nested scrollable area.

Public API

Attributes

Attribute	Type	Default	Real runtime effect
`string-lerp`	number	`0.1`	Controls how quickly the container scroll position catches up to its wheel target.

CSS Variables and DOM Output

StringScrollContainer has no CSS output and no module-specific event output.

Its public behavior is the container scroll itself:

wheel input is intercepted inside the container
the target scroll position is eased toward with local lerp physics

Events

This module does not emit any module-specific public events.

Mirror Behavior

This module has no mirror output contract.

Quick Example

HTML

<section class="hero">Scroll down</section>

<section class="stage">
  <div class="grid">
    <div string="scroll-container" string-lerp="0.08" class="scroll-container-demo">
      <div class="scroll-item">Notes</div>
      <div class="scroll-item">Scope</div>
      <div class="scroll-item">Milestones</div>
      <div class="scroll-item">Launch</div>
    </div>

    <div string="scroll-container" string-lerp="0.12" class="scroll-container-demo">
      <div class="scroll-item">Tasks</div>
      <div class="scroll-item">Design system</div>
      <div class="scroll-item">Landing page</div>
      <div class="scroll-item">QA</div>
    </div>

    <div string="scroll-container" string-lerp="0.18" class="scroll-container-demo">
      <div class="scroll-item">Archive</div>
      <div class="scroll-item">v2</div>
      <div class="scroll-item">v3</div>
      <div class="scroll-item">v4</div>
    </div>
  </div>
</section>

<section class="hero">Scroll up</section>

CSS

.hero,
.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.grid {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.scroll-container-demo {
  height: 280px;
  overflow-y: auto;
  border: 1px solid black;
  background: white;
}

.scroll-item {
  min-height: 88px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid black;
}

Registration

TypeScript

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

const stringTune = StringTune.getInstance();
stringTune.use(StringScrollContainer);
stringTune.start(60);

Detailed Behavior

If the element has overflow-y: visible, the module changes it to overflow-y: auto.
At the top and bottom boundaries, wheel events are allowed to pass through instead of being trapped.
Native scroll updates from dragbars, keyboard, or touch keep the internal state in sync when custom wheel motion is idle.
This module does not make nested content compatible with StringProgress. It only changes how the container itself scrolls.
In the current runtime, disconnect clears internal state but the DOM listeners are attached through anonymous callbacks and are not explicitly removed.