Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ScrollView

Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display.

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

Protected _autoScrollAccumulatedTime

_autoScrollAccumulatedTime: number = 0

Protected _autoScrollAttenuate

_autoScrollAttenuate: boolean = false

Protected _autoScrollBraking

_autoScrollBraking: boolean = false

Protected _autoScrollBrakingStartPosition

_autoScrollBrakingStartPosition: Vec3 = new Vec3()

Protected _autoScrollCurrentlyOutOfBoundary

_autoScrollCurrentlyOutOfBoundary: boolean = false

Protected _autoScrollStartPosition

_autoScrollStartPosition: Vec3 = new Vec3()

Protected _autoScrollTargetDelta

_autoScrollTargetDelta: Vec3 = new Vec3()

Protected _autoScrollTotalTime

_autoScrollTotalTime: number = 0

Protected _autoScrolling

_autoScrolling: boolean = false

Protected _bottomBoundary

_bottomBoundary: number = 0

Protected _content

_content: Node | null = null

Protected _contentPos

_contentPos: Vec3 = new Vec3()

Protected _deltaPos

_deltaPos: Vec3 = new Vec3()

Private _enabled

_enabled: boolean = true

Protected _horizontalScrollBar

_horizontalScrollBar: ScrollBar | null = null

Private _id

_id: string = idGenerator.getNewId()

For internal usage.

Protected _isBouncing

_isBouncing: boolean = false

Protected _isScrollEndedWithThresholdEventFired

_isScrollEndedWithThresholdEventFired: boolean = false

Protected _leftBoundary

_leftBoundary: number = 0

Protected _mouseWheelEventElapsedTime

_mouseWheelEventElapsedTime: number = 0

Protected _name

_name: string

_objFlags

_objFlags: number

Protected _outOfBoundaryAmount

_outOfBoundaryAmount: Vec3 = new Vec3()

Protected _outOfBoundaryAmountDirty

_outOfBoundaryAmountDirty: boolean = true

Protected _rightBoundary

_rightBoundary: number = 0

Private sceneGetter

sceneGetter: null | (() => RenderScene) = null

Protected _scrollEventEmitMask

_scrollEventEmitMask: number = 0

Protected _scrolling

_scrolling: boolean = false

Protected _stopMouseWheel

_stopMouseWheel: boolean = false

Protected _topBoundary

_topBoundary: number = 0

Protected _touchMoveDisplacements

_touchMoveDisplacements: Vec3[] = []

Protected _touchMovePreviousTimestamp

_touchMovePreviousTimestamp: number = 0

Protected _touchMoveTimeDeltas

_touchMoveTimeDeltas: number[] = []

Protected _touchMoved

_touchMoved: boolean = false

Protected _verticalScrollBar

_verticalScrollBar: ScrollBar | null = null

bounceDuration

bounceDuration: number = 1

The elapse time of bouncing back. A value of 0 will bounce back immediately.

brake

brake: number = 0.5

It determines how quickly the content stop moving. A value of 1 will stop the movement immediately. A value of 0 will never stop the movement until it reaches to the boundary of scrollview.

cancelInnerEvents

cancelInnerEvents: boolean = true

If cancelInnerEvents is set to true, the scroll behavior will cancel touch events on inner content nodes It's set to true by default.

elastic

elastic: boolean = true

When elastic is set, the content will be bounce back when move out of boundary.

horizontal

horizontal: boolean = true

Enable horizontal scroll.

inertia

inertia: boolean = true

When inertia is set, the content will continue to move when touch ended.

node

node: Node = NullNode

The node this component is attached to. A component is always attached to a node.

example
import { log } from 'cc';
log(comp.node);

scrollEvents

scrollEvents: ComponentEventHandler[] = []

ScrollView events callback.

vertical

vertical: boolean = true

Enable vertical scroll.

Static EventType

EventType: EventType = EventType

Static system

system: null = null

Accessors

scriptAsset

  • get scriptAsset(): null

isOnLoadCalled

  • get isOnLoadCalled(): number

content

  • get content(): null | Node
  • set content(value: null | Node): void

enabled

  • get enabled(): boolean
  • set enabled(value: boolean): void

enabledInHierarchy

  • get enabledInHierarchy(): boolean

horizontalScrollBar

  • get horizontalScrollBar(): null | ScrollBar
  • set horizontalScrollBar(value: ScrollBar | null): void

isValid

  • get isValid(): boolean

  • Indicates whether the object is not yet destroyed. (It will not be available after being destroyed)
    When an object's destroy is called, it is actually destroyed after the end of this frame. So isValid will return false from the next frame, while isValid in the current frame will still be true. If you want to determine whether the current frame has called destroy, use isValid(obj, true), but this is often caused by a particular logical requirements, which is not normally required.

    default

    true

    readonly
    example
    import { Node, log } from 'cc';
const node = new Node();
log(node.isValid);    // true
node.destroy();
log(node.isValid);    // true, still valid in this frame
// after a frame...
log(node.isValid);    // false, destroyed in the end of last frame

    Returns boolean

name

  • get name(): string
  • set name(value: string): void

uuid

  • get uuid(): string

verticalScrollBar

  • get verticalScrollBar(): null | ScrollBar
  • set verticalScrollBar(value: ScrollBar | null): void

view

Methods

Optional Private preload

  • __preload(): void

  • __preload is called before every onLoad.
    It is used to initialize the builtin components internally,
    to avoid checking whether onLoad is called before every public method calls.
    This method should be removed if script priority is supported.

    Returns void

Protected adjustContentOutOfBoundary

  • _adjustContentOutOfBoundary(): void

Protected calculateAttenuatedFactor

  • calculateAttenuatedFactor(distance: number): number

Protected calculateAutoScrollTimeByInitialSpeed

  • calculateAutoScrollTimeByInitialSpeed(initialSpeed: number): number

Protected calculateBoundary

  • _calculateBoundary(): void

Protected calculateMovePercentDelta

  • calculateMovePercentDelta(options: any): Vec3

Protected calculateTouchMoveVelocity

  • _calculateTouchMoveVelocity(): Vec3

Protected checkMouseWheel

  • checkMouseWheel(dt: number): void

Protected clampDelta

destroyImmediate

  • _destroyImmediate(): void

destruct

  • _destruct(): void

  • Clear all references in the instance.

    NOTE: this method will not clear the getter or setter functions which defined in the instance of CCObject. You can override the _destruct method if you need, for example: _destruct: function () { for (var key in this) { if (this.hasOwnProperty(key)) { switch (typeof this[key]) { case 'string': this[key] = ''; break; case 'object': case 'function': this[key] = null; break; } } }

    Returns void

Protected dispatchEvent

  • dispatchEvent(event: string): void

Protected flattenVectorByDirection

  • flattenVectorByDirection(vector: Vec3): Vec3

Protected gatherTouchMove

  • gatherTouchMove(delta: Vec3): void

Protected getContentBottomBoundary

  • _getContentBottomBoundary(): number

Protected getContentLeftBoundary

  • _getContentLeftBoundary(): number

Protected getContentRightBoundary

  • _getContentRightBoundary(): number

Protected getContentTopBoundary

  • _getContentTopBoundary(): number

Protected getHowMuchOutOfBoundary

  • getHowMuchOutOfBoundary(addition?: Vec3): Vec3

Protected getLocalAxisAlignDelta

Optional Private getLocalBounds

  • getLocalBounds(out_rect: Rect): void

  • If the component's bounding box is different from the node's, you can implement this method to supply a custom axis aligned bounding box (AABB), so the editor's scene view can perform hit test properly.

    Parameters

    • out_rect: Rect

      The rect to store the result bounding rect

    Returns void

Private getRenderScene

  • _getRenderScene(): RenderScene

Protected handleMoveLogic

  • handleMoveLogic(touch: Touch): void

Protected handlePressLogic

  • _handlePressLogic(): void

Protected handleReleaseLogic

  • handleReleaseLogic(touch: Touch): void

Protected hasNestedViewGroup

  • hasNestedViewGroup(event: Event, captureListeners?: Node[]): undefined | false | true

Protected hideScrollBar

  • _hideScrollBar(): void

instantiate

  • instantiate(cloned: any): any

Protected isNecessaryAutoScrollBrake

  • _isNecessaryAutoScrollBrake(): boolean

Protected isOutOfBoundary

  • _isOutOfBoundary(): boolean

Protected moveContent

  • moveContent(deltaMove: Vec3, canStartBounceBack?: undefined | false | true): void

Protected moveContentToTopLeft

  • moveContentToTopLeft(scrollViewSize: Size): void

Protected onMouseWheel

onPreDestroy

  • _onPreDestroy(): void

Protected onScrollBarTouchBegan

  • _onScrollBarTouchBegan(): void

Protected onScrollBarTouchEnded

  • _onScrollBarTouchEnded(): void

Protected onTouchBegan

Protected onTouchCancelled

  • onTouchCancelled(event: EventTouch, captureListeners?: Node[]): void

Protected onTouchEnded

Protected onTouchMoved

Protected processAutoScrolling

  • processAutoScrolling(dt: any): void

Protected processDeltaMove

  • processDeltaMove(deltaMove: Vec3): void

Protected processInertiaScroll

  • _processInertiaScroll(): void

Protected registerEvent

  • _registerEvent(): void

Protected scaleChanged

Protected scrollChildren

  • scrollChildren(deltaMove: Vec3): void

Protected startAttenuatingAutoScroll

  • startAttenuatingAutoScroll(deltaMove: Vec3, initialVelocity: Vec3): void

Protected startAutoScroll

  • startAutoScroll(deltaMove: Vec3, timeInSecond: number, attenuated?: boolean): void

Protected startBounceBackIfNeeded

  • _startBounceBackIfNeeded(): boolean

Protected startInertiaScroll

  • startInertiaScroll(touchMoveVelocity: Vec3): void

Protected stopPropagationIfTargetIsMe

  • stopPropagationIfTargetIsMe(event: Event): void

Protected unregisterEvent

  • _unregisterEvent(): void

Protected updateScrollBar

  • updateScrollBar(outOfBoundary: Vec3): void

Protected updateScrollBarState

  • _updateScrollBarState(): void

addComponent

  • addComponent<T>(classConstructor: Constructor<T>): T | null
  • addComponent(className: string): Component | null

destroy

  • destroy(): boolean

getComponent

  • getComponent<T>(classConstructor: Constructor<T>): T | null
  • getComponent(className: string): Component | null

  • Returns the component of supplied type if the node has one attached, null if it doesn't.
    You can also get component in the node by passing in the name of the script.

    example
    // get custom test calss.
var test = node.getComponent("Test");

    Type parameters

    Parameters

    • classConstructor: Constructor<T>

      The class of component to be retrieved or to be created

    Returns T | null

  • Returns the component of supplied type if the node has one attached, null if it doesn't.
    You can also get component in the node by passing in the name of the script.

    example
    // get custom test calss.
var test = node.getComponent("Test");

    Parameters

    • className: string

      A string for the class name of the component

    Returns Component | null

getComponentInChildren

  • getComponentInChildren<T>(classConstructor: Constructor<T>): T | null
  • getComponentInChildren(className: string): Component | null

getComponents

  • getComponents<T>(classConstructor: Constructor<T>): T[]
  • getComponents(className: string): Component[]

getComponentsInChildren

  • getComponentsInChildren<T>(classConstructor: Constructor<T>): T[]
  • getComponentsInChildren(className: string): Component[]

getContentPosition

  • getContentPosition(): Vec3

getMaxScrollOffset

  • getMaxScrollOffset(): Vec3

getScrollEndedEventTiming

  • getScrollEndedEventTiming(): number

getScrollOffset

  • getScrollOffset(): Vec3

isAutoScrolling

  • isAutoScrolling(): boolean

  • Query whether the ScrollView is currently scrolling because of a bounceback or inertia slowdown.

    Returns boolean

    • 滚动视图是否在惯性滚动。

isScrolling

  • isScrolling(): boolean

Protected Optional lateUpdate

  • lateUpdate(dt: number): void

  • LateUpdate is called every frame, if the Component is enabled.
    This is a lifecycle method. It may not be implemented in the super class.
    You can only call its super class method inside it. It should not be called manually elsewhere.

    Parameters

    • dt: number

      the delta time in seconds it took to complete the last frame

    Returns void

Protected Optional onDestroy

  • onDestroy(): void

  • Called when this component will be destroyed.
    This is a lifecycle method. It may not be implemented in the super class.
    You can only call its super class method inside it. It should not be called manually elsewhere.

    Returns void

onDisable

  • onDisable(): void

onEnable

  • onEnable(): void

Optional onFocusInEditor

  • onFocusInEditor(): void

Protected Optional onLoad

  • onLoad(): void

  • When attaching to an active node or its node first activated.
    onLoad is always called before any start functions, this allows you to order initialization of scripts.
    This is a lifecycle method. It may not be implemented in the super class.
    You can only call its super class method inside it. It should not be called manually elsewhere.

    Returns void

Optional onLostFocusInEditor

  • onLostFocusInEditor(): void

Protected Optional onRestore

  • onRestore(): void

  • onRestore is called after the user clicks the Reset item in the Inspector's context menu or performs an undo operation on this component.

    If the component contains the "internal state", short for "temporary member variables which not included
    in its CCClass properties", then you may need to implement this function.

    The editor will call the getset accessors of your component to record/restore the component's state
    for undo/redo operation. However, in extreme cases, it may not works well. Then you should implement
    this function to manually synchronize your component's "internal states" with its public properties.
    Once you implement this function, all the getset accessors of your component will not be called when
    the user performs an undo/redo operation. Which means that only the properties with default value
    will be recorded or restored by editor.

    Similarly, the editor may failed to reset your component correctly in extreme cases. Then if you need
    to support the reset menu, you should manually synchronize your component's "internal states" with its
    properties in this function. Once you implement this function, all the getset accessors of your component
    will not be called during reset operation. Which means that only the properties with default value
    will be reset by editor.

    This function is only called in editor mode.

    Returns void

Optional resetInEditor

  • resetInEditor(): void

schedule

  • schedule(callback: any, interval?: number, repeat?: number, delay?: number): void

  • Schedules a custom task.
    If the task is already scheduled, then the interval parameter will be updated without scheduling it again.

    example
    import { log } from 'cc';
this.schedule((dt) => void log(`time: ${dt}`), 1);

    Parameters

    • callback: any

      The callback function of the task

    • Default value interval: number = 0

      The time interval between each invocation

    • Default value repeat: number = legacyCC.macro.REPEAT_FOREVER

      The repeat count of this task, the task will be invoked (repeat + 1) times, use macro.REPEAT_FOREVER to repeat a task forever

    • Default value delay: number = 0

      The delay time for the first invocation

    Returns void

scheduleOnce

  • scheduleOnce(callback: any, delay?: number): void

  • Schedules a task that runs only once, with a delay of 0 or larger.

    method

    scheduleOnce

    see

    schedule

    example
    import { log } from 'cc';
this.scheduleOnce((dt) => void log(`time: ${dt}`), 2);

    Parameters

    • callback: any

      The callback function of the task

    • Default value delay: number = 0

      The delay time for the first invocation

    Returns void

scrollTo

  • scrollTo(anchor: Vec2, timeInSecond?: undefined | number, attenuated?: undefined | false | true): void

  • Scroll the content to the percent position of ScrollView in any direction.

    example
    // Vertical scroll to the bottom of the view.
scrollView.scrollTo(new Vec2(0, 1), 0.1);
// Horizontal scroll to view right.
scrollView.scrollTo(new Vec2(1, 0), 0.1);

    Parameters

    • anchor: Vec2

      在 new Vec2(0,0) and new Vec2(1,1) 上取差值的一个点。

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到指定水平或垂直百分比位置。

    • Optional attenuated: undefined | false | true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToBottom

  • scrollToBottom(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the bottom boundary of ScrollView.

    example
    // Scroll to the bottom of the view.
scrollView.scrollToBottom(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到底部边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToBottomLeft

  • scrollToBottomLeft(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the bottom left boundary of ScrollView.

    example
    // Scroll to the lower left corner of the view.
scrollView.scrollToBottomLeft(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到左下边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToBottomRight

  • scrollToBottomRight(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the bottom right boundary of ScrollView.

    example
    // Scroll to the lower right corner of the view.
scrollView.scrollToBottomRight(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到右边下边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToLeft

  • scrollToLeft(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the left boundary of ScrollView.

    example
    // Scroll to the left of the view.
scrollView.scrollToLeft(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到左边边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToOffset

  • scrollToOffset(offset: Vec3, timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll with an offset related to the ScrollView's top left origin, if timeInSecond is omitted, then it will jump to the specific offset immediately.

    example
    // Scroll to middle position in 0.1 second in x-axis
let maxScrollOffset = this.getMaxScrollOffset();
scrollView.scrollToOffset(new Vec3(maxScrollOffset.x / 2, 0, 0), 0.1);

    Parameters

    • offset: Vec3

      指定移动偏移量。

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到指定偏移量处。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToPercentHorizontal

  • scrollToPercentHorizontal(percent: number, timeInSecond: number, attenuated: boolean): void

  • Scroll the content to the horizontal percent position of ScrollView.

    example
    // Scroll to middle position.
scrollView.scrollToBottomRight(0.5, 0.1);

    Parameters

    • percent: number

      0 - 之间的百分比。

    • timeInSecond: number

      滚动时间（s）。 如果超时，内容将立即跳到指定水平百分比位置。

    • attenuated: boolean

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToPercentVertical

  • scrollToPercentVertical(percent: number, timeInSecond?: undefined | number, attenuated?: undefined | false | true): void

  • Scroll the content to the vertical percent position of ScrollView.

    example
    scrollView.scrollToPercentVertical(0.5, 0.1);

    Parameters

    • percent: number

      0 - 1 之间的百分比。

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到指定垂直百分比位置。

    • Optional attenuated: undefined | false | true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToRight

  • scrollToRight(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the right boundary of ScrollView.

    example
    // Scroll to the right of the view.
scrollView.scrollToRight(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到右边边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToTop

  • scrollToTop(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the top boundary of ScrollView.

    example
    // Scroll to the top of the view.
scrollView.scrollToTop(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到顶部边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToTopLeft

  • scrollToTopLeft(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the top left boundary of ScrollView.

    example
    // Scroll to the upper left corner of the view.
scrollView.scrollToTopLeft(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到左上边边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

scrollToTopRight

  • scrollToTopRight(timeInSecond?: undefined | number, attenuated?: boolean): void

  • Scroll the content to the top right boundary of ScrollView.

    example
    // Scroll to the top right corner of the view.
scrollView.scrollToTopRight(0.1);

    Parameters

    • Optional timeInSecond: undefined | number

      滚动时间（s）。 如果超时，内容将立即跳到右上边界。

    • Default value attenuated: boolean = true

      滚动加速是否衰减，默认为 true。

    Returns void

setContentPosition

  • setContentPosition(position: Vec3): void

start

  • start(): void

stopAutoScroll

  • stopAutoScroll(): void

unschedule

  • unschedule(callback_fn: any): void

unscheduleAllCallbacks

  • unscheduleAllCallbacks(): void

update

  • update(dt: number): void

Static deferredDestroy

  • _deferredDestroy(): void

Generated using TypeDoc