Engine API Reference
    Preparing search index...

    Class ScrollViewComponent

    A ScrollViewComponent enables a group of entities to behave like a masked scrolling area, with optional horizontal and vertical scroll bars.

    Hierarchy (View Summary)

    Index

    Properties

    entity: Entity

    The Entity that this Component is attached to.

    The ComponentSystem used to create this Component.

    Accessors

    • get bounceAmount(): number

      Gets how far the content should move before bouncing back.

      Returns number

    • set bounceAmount(arg: number): void

      Sets how far the content should move before bouncing back.

      Parameters

      • arg: number

      Returns void

    • get contentEntity(): null | Entity

      Gets the entity which contains the scrolling content itself.

      Returns null | Entity

    • set contentEntity(arg: null | Entity): void

      Sets the entity which contains the scrolling content itself. This entity must have an ElementComponent.

      Parameters

      Returns void

    • get enabled(): boolean

      Gets the enabled state of the component.

      Returns boolean

    • set enabled(arg: boolean): void

      Sets the enabled state of the component.

      Parameters

      • arg: boolean

      Returns void

    • get friction(): number

      Gets how freely the content should move if thrown.

      Returns number

    • set friction(arg: number): void

      Sets how freely the content should move if thrown, i.e. By flicking on a phone or by flinging the scroll wheel on a mouse. A value of 1 means that content will stop immediately; 0 means that content will continue moving forever (or until the bounds of the content are reached, depending on the scrollMode).

      Parameters

      • arg: number

      Returns void

    • get horizontal(): boolean

      Gets whether horizontal scrolling is enabled.

      Returns boolean

    • set horizontal(arg: boolean): void

      Sets whether horizontal scrolling is enabled.

      Parameters

      • arg: boolean

      Returns void

    • get horizontalScrollbarEntity(): null | Entity

      Gets the entity to be used as the horizontal scrollbar.

      Returns null | Entity

    • set horizontalScrollbarEntity(arg: null | Entity): void

      Sets the entity to be used as the horizontal scrollbar. This entity must have a ScrollbarComponent.

      Parameters

      Returns void

    • get horizontalScrollbarVisibility(): number

      Gets whether the horizontal scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.

      Returns number

    • set horizontalScrollbarVisibility(arg: number): void

      Sets whether the horizontal scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.

      Parameters

      • arg: number

      Returns void

    • get mouseWheelSensitivity(): Vec2

      Gets the mouse wheel horizontal and vertical sensitivity.

      Returns Vec2

    • set mouseWheelSensitivity(arg: Vec2): void

      Sets the mouse wheel horizontal and vertical sensitivity. Only used if useMouseWheel is set. Setting a direction to 0 will disable mouse wheel scrolling in that direction. 1 is a default sensitivity that is considered to feel good. The values can be set higher or lower than 1 to tune the sensitivity. Defaults to [1, 1].

      Parameters

      Returns void

    • get scroll(): Vec2

      Gets the scroll value.

      Returns Vec2

    • set scroll(value: Vec2): void

      Sets the scroll value.

      Parameters

      Returns void

    • get scrollMode(): number

      Gets the scroll mode of the scroll viewer.

      Returns number

    • set scrollMode(arg: number): void

      Sets the scroll mode of the scroll viewer. Specifies how the scroll view should behave when the user scrolls past the end of the content. Modes are defined as follows:

      Parameters

      • arg: number

      Returns void

    • get useMouseWheel(): boolean

      Gets whether to use mouse wheel for scrolling (horizontally and vertically).

      Returns boolean

    • set useMouseWheel(arg: boolean): void

      Sets whether to use mouse wheel for scrolling (horizontally and vertically).

      Parameters

      • arg: boolean

      Returns void

    • get vertical(): boolean

      Gets whether vertical scrolling is enabled.

      Returns boolean

    • set vertical(arg: boolean): void

      Sets whether vertical scrolling is enabled.

      Parameters

      • arg: boolean

      Returns void

    • get verticalScrollbarEntity(): null | Entity

      Gets the entity to be used as the vertical scrollbar.

      Returns null | Entity

    • set verticalScrollbarEntity(arg: null | Entity): void

      Sets the entity to be used as the vertical scrollbar. This entity must have a ScrollbarComponent.

      Parameters

      Returns void

    • get verticalScrollbarVisibility(): number

      Gets whether the vertical scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.

      Returns number

    • set verticalScrollbarVisibility(arg: number): void

      Sets whether the vertical scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.

      Parameters

      • arg: number

      Returns void

    • get viewportEntity(): null | Entity

      Gets the entity to be used as the masked viewport area, within which the content will scroll.

      Returns null | Entity

    • set viewportEntity(arg: null | Entity): void

      Sets the entity to be used as the masked viewport area, within which the content will scroll. This entity must have an ElementGroup component.

      Parameters

      Returns void

    Methods

    • Fire an event, all additional arguments are passed on to the event listener.

      Parameters

      • name: string

        Name of event to fire.

      • Optionalarg1: any

        First argument that is passed to the event handler.

      • Optionalarg2: any

        Second argument that is passed to the event handler.

      • Optionalarg3: any

        Third argument that is passed to the event handler.

      • Optionalarg4: any

        Fourth argument that is passed to the event handler.

      • Optionalarg5: any

        Fifth argument that is passed to the event handler.

      • Optionalarg6: any

        Sixth argument that is passed to the event handler.

      • Optionalarg7: any

        Seventh argument that is passed to the event handler.

      • Optionalarg8: any

        Eighth argument that is passed to the event handler.

      Returns EventHandler

      Self for chaining.

      obj.fire('test', 'This is the message');
      
    • Test if there are any handlers bound to an event name.

      Parameters

      • name: string

        The name of the event to test.

      Returns boolean

      True if the object has handlers bound to the specified event name.

      obj.on('test', () => {}); // bind an event to 'test'
      obj.hasEvent('test'); // returns true
      obj.hasEvent('hello'); // returns false
    • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

      Parameters

      • Optionalname: string

        Name of the event to unbind.

      • Optionalcallback: HandleEventCallback

        Function to be unbound.

      • Optionalscope: any

        Scope that was used as the this when the event is fired.

      Returns EventHandler

      Self for chaining.

      const handler = () => {};
      obj.on('test', handler);

      obj.off(); // Removes all events
      obj.off('test'); // Removes all events called 'test'
      obj.off('test', handler); // Removes all handler functions, called 'test'
      obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this
    • Attach an event handler to an event.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      Can be used for removing event in the future.

      obj.on('test', (a, b) => {
      console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      const evt = obj.on('test', (a, b) => {
      console.log(a + b);
      });
      // some time later
      evt.off();
    • Attach an event handler to an event. This handler will be removed after being fired once.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      • can be used for removing event in the future.
      obj.once('test', (a, b) => {
      console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      obj.fire('test', 1, 2); // not going to get handled

    Events

    EVENT_SETSCROLL: string = 'set:scroll'

    Fired whenever the scroll position changes. The handler is passed a Vec2 containing the horizontal and vertical scroll values in the range 0..1.

    entity.scrollview.on('set:scroll', (scroll) => {
    console.log(`Horizontal scroll position: ${scroll.x}`);
    console.log(`Vertical scroll position: ${scroll.y}`);
    });