mwg API
    Preparing search index...

    Class ScrollBox

    A clipped viewport with a scrollbar: put rows in content and they scroll inside the box, everything outside it hidden by a mask. The scrollbar is drawn from the theme; the wheel, scrollBy and scrollIntoView all run through scrollOffset, so they clamp the same way. The box owns its hitArea (its viewport, kept current by resize and setContentHeight), so a wheel over the empty part of the viewport reaches it instead of needing a row under the pointer to bubble from.

    touch: true lets a finger drag the content (a drag ends the tap on the rows under it) and coast on release, keyboard: true makes handleKey scroll by line, page and to the ends, the scrollbar's thumb can be dragged and its track clicked, and autoHeight sizes the viewport to the content up to height. Call update(dt) each frame for the coasting.

    import { ScrollBox } from '@datamoc/mwg/two-d/ui';

    const box = new ScrollBox({ width: 200, height: 120, contentHeight: 400 });
    box.scrollBy(60);
    console.log(box.offset); // 60

    Hierarchy

    • Container
      • ScrollBox
    Index
    constructor
    content onChange
    contentHeight dragged maxOffset offset scrollable thumbMetrics viewportHeight viewportWidth
    destroy dragEnd dragMove dragStart handleKey resize scrollBy scrollIntoView scrollTo scrollToThumbCentre setContentHeight thumbDragMove thumbDragStart update

    Readonlycontent

    content: Container<ContainerChild> = ...

    add the rows to scroll here

    onChange: Signal<number> = ...
    • get dragged(): boolean

      true once the pointer travelled far enough to count as a drag rather than a tap

      Returns boolean

    • get thumbMetrics(): { height: number; y: number }

      where the scrollbar's thumb sits and how tall it is, in the box's own space

      Returns { height: number; y: number }

    • Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

      Parameters

      • Optionaloptions: DestroyOptions

        Options parameter. A boolean will act as if all options have been set to that value

      Returns void

      container.destroy();
      container.destroy(true);
      container.destroy({ children: true });
      container.destroy({ children: true, texture: true, textureSource: true });

    • the pointer moved while down; the content follows once it has travelled a few pixels

      Parameters

      • y: number
      • time: number

      Returns void

    • a finger or button went down at y (any one coordinate space, time in seconds)

      Parameters

      • y: number
      • time: number

      Returns void

    • Scrolls for a key a keyboard-driven list was handed (KeyboardEvent.key).

      Parameters

      • key: string

      Returns boolean

      true when the key is one this box scrolls by, so a caller can stop it going further

    • scrolls just enough to bring a height-tall item at top fully into view

      Parameters

      • top: number
      • height: number

      Returns void

    • a click on the track at local y puts the thumb's centre there

      Parameters

      • y: number

      Returns void

    • the thumb moved to y: the offset follows in proportion to the thumb's travel

      Parameters

      • y: number

      Returns void

    • advances touch coasting; call once a frame from the owning scene's update

      Parameters

      • dt: number

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods