Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Scroller

任意のElement(or HTML Document)のスクロールやサイズ変更を監視し、その情報を通知するクラスです。
DDEVを継承しており、イベントの購読Scroller.on等のインターフェースを利用するか、 Scroller.observeメソッドを利用します。
Scroller.onScroller.onceで購読可能なイベントについてはScrollerEventMapを参照してください。

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Object literals

Constructors

constructor

  • Scrollerインスタンスを作成します。 コンテキストとなるElementをこの時点で指定するか否かは任意です。

    Parameters

    • Default value settingOrElementOrQueryString: Partial<ScrollerSetting> | Element | string = {}

      任意です。ScrollerSettingか Element(or cssクエリセレクタ文字列)を直接指定します。この時点でElementを指定しない場合は、setElementを実行するまでインスタンスは動作しません。

    Returns Scroller

Properties

Private _containerHeight

_containerHeight: number = 0

Private _containerWidth

_containerWidth: number = 0

Private _el

_el: Element

Private _eventTarget

_eventTarget: ScrollerEventTarget

Private _isBodyElement

_isBodyElement: boolean = false

Private _isDocumentElement

_isDocumentElement: boolean = false

Private _isRootElement

_isRootElement: boolean = false

Private _lastAxis

_lastAxis: ScrollAxis

Private _lastDirection

_lastDirection: ScrollDirection

Private _lastTotalX

_lastTotalX: number = 0

Private _lastTotalY

_lastTotalY: number = 0

Private _lastXDirection

_lastXDirection: ScrollXDirection = "left"

Private _lastYDirection

_lastYDirection: ScrollYDirection = "top"

Private _nowScrolling

_nowScrolling: boolean = false

Private _observers

_observers: ScrollerObserver[] = []

Private _readyResolvers

_readyResolvers: Function[] = []

Private Optional _resizeListener

_resizeListener: EventListener

Private Optional _resizeObserver

_resizeObserver: ResizeObserver

Private _scrollBottom

_scrollBottom: number = 0

Private _scrollHeight

_scrollHeight: number = 0

Private _scrollLeft

_scrollLeft: number = 0

Private Optional _scrollListener

_scrollListener: EventListener

Private _scrollRight

_scrollRight: number = 0

Private _scrollSizeOvserverPollingId

_scrollSizeOvserverPollingId: number | null = null

Private _scrollSizeOvserverSuspended

_scrollSizeOvserverSuspended: boolean = false

Private _scrollStoppers

_scrollStoppers: ScrollStopper[] = []

Private _scrollToResult

_scrollToResult: ScrollResult | null = null

Private _scrollTop

_scrollTop: number = 0

Private _scrollWidth

_scrollWidth: number = 0

Private _scrollingJudgeTimerId

_scrollingJudgeTimerId: number | null = null

Private _startX

_startX: number = 0

Private _startY

_startY: number = 0

Private _state

_state: ScrollerState = ScrollerState.Pending

Private _tickedX

_tickedX: number = 0

Private _tickedY

_tickedY: number = 0

Private _visibilityListener

_visibilityListener: VisibilityStateListener

baseAxis

baseAxis: ScrollAxis = "y"

縦、横のどちらのスクロールを基準とするかを示します。 デフォルトはyです。
この設定はScroller.toElementのデフォルト値にも影響します。

Optional scrollSizeOvserver

scrollSizeOvserver: ScrollSizeOvserverSetting

scrollingJudgeInterval

scrollingJudgeInterval: number = 500

スクロールを検知してから、移動がなくなった際に、何ms後にスクロール終了と判定するかのインターバル値を示します。 デフォルトは500です。

Static States

States: ScrollerState = ScrollerState

Scrollerの状態を示すenum値です。

see

ScrollerState

Static scrollerObservableKeys

scrollerObservableKeys: ("state" | "isPending" | "isReady" | "isRunning" | "isDestroyed" | "scrollEnabled" | "containerWidth" | "containerHeight" | "scrollWidth" | "scrollHeight" | "scrollableX" | "scrollableY" | "scrollTop" | "scrollLeft" | "scrollRight" | "scrollBottom" | "lastAxis" | "lastDirection" | "lastYDirection" | "lastXDirection" | "nowScrolling")[] = scrollerObservableKeys

Scrollerクラスの状態を監視&同期するオブジェクトが 保有すべきプロパティ一のキーの配列です。

Accessors

containerHeight

  • get containerHeight(): number
  • スクロール要素の高さを示します。

    Returns number

containerWidth

  • get containerWidth(): number
  • スクロール要素の幅を示します。

    Returns number

el

  • get el(): Element
  • 設定されたElement要素です。 初期化が完了していない時には本getterはundefinedを返却する事に注意してください。

    Returns Element

isDestroyed

  • get isDestroyed(): boolean
  • インスタンスが破棄済みである場合trueを示します。

    Returns boolean

isPending

  • get isPending(): boolean
  • 未初期化である場合trueを示します。

    Returns boolean

isReady

  • get isReady(): boolean
  • 初期化済み&停止状態である場合trueを示します。

    Returns boolean

isRunning

  • get isRunning(): boolean
  • 初期化済み&動作中である場合trueを示します。

    Returns boolean

lastAxis

lastDirection

lastPayload

lastXDirection

lastYDirection

nowScrolling

  • get nowScrolling(): boolean
  • 現在スクロール中である場合trueを示します。

    Returns boolean

scrollBottom

  • get scrollBottom(): number
  • set scrollBottom(scrollBottom: number): void
  • 現在の下辺からのスクロール量を示します。

    Returns number

  • 下辺からのスクロール量を設定します。

    Parameters

    • scrollBottom: number

    Returns void

scrollEnabled

  • get scrollEnabled(): boolean
  • スクロールの有効状態を取得します

    Returns boolean

scrollHeight

  • get scrollHeight(): number
  • スクロール要素内のコンテンツの高さを示します。

    Returns number

scrollLeft

  • get scrollLeft(): number
  • set scrollLeft(scrollLeft: number): void
  • 現在の左辺からのスクロール量を示します。

    Returns number

  • 左辺からのスクロール量を設定します。

    Parameters

    • scrollLeft: number

    Returns void

scrollRight

  • get scrollRight(): number
  • set scrollRight(scrollRight: number): void
  • 現在の右辺からのスクロール量を示します。

    Returns number

  • 右辺からのスクロール量を設定します。

    Parameters

    • scrollRight: number

    Returns void

scrollTop

  • get scrollTop(): number
  • set scrollTop(scrollTop: number): void
  • 現在の上辺からのスクロール量を示します。

    Returns number

  • 上辺からのスクロール量を設定します。

    Parameters

    • scrollTop: number

    Returns void

scrollWidth

  • get scrollWidth(): number
  • スクロール要素内のコンテンツの幅を示します。

    Returns number

scrollableX

  • get scrollableX(): boolean
  • x軸にスクロール可能な場合trueを示します

    Returns boolean

scrollableY

  • get scrollableY(): boolean
  • y軸にスクロール可能な場合trueを示します

    Returns boolean

state

Methods

Private _checkDestroyed

  • _checkDestroyed(): void

Private _clearScrollToResult

  • _clearScrollToResult(): void

Private _clearScrollingJudgeTimer

  • _clearScrollingJudgeTimer(): void

Private _createMergedScrollOptions

Private _createMergedScrollToElementOptions

Private _onResize

  • _onResize(width?: undefined | number, height?: undefined | number): void
  • Parameters

    • Optional width: undefined | number
    • Optional height: undefined | number

    Returns void

Private _onScroll

  • _onScroll(): void

Private _scrollDisable

  • _scrollDisable(): void

Private _scrollEnable

  • _scrollEnable(): void

Private _setScrollToResult

Private _setState

Private _setup

  • _setup(): Promise<void>

Private _startListeners

  • _startListeners(): void

Private _startScrollSizeOvserver

  • _startScrollSizeOvserver(): void

Private _stopListeners

  • _stopListeners(): void

Private _stopScrollSizeOvserver

  • _stopScrollSizeOvserver(): void

Private _syncToObserver

Private _syncToObservers

Private _triggerScrollTick

  • _triggerScrollTick(event: keyof ScrollerScrollEventMap): void
  • Parameters

    • event: keyof ScrollerScrollEventMap

    Returns void

Private _update

  • _update(width?: undefined | number, height?: undefined | number): void
  • Parameters

    • Optional width: undefined | number
    • Optional height: undefined | number

    Returns void

Private _updateContainerSize

  • _updateContainerSize(width?: number, height?: number): void
  • Parameters

    • Default value width: number = this._isBodyElement? // ? window.innerWidth(document.documentElement as HTMLElement).clientWidth: this.el.clientWidth
    • Default value height: number = this._isBodyElement? // ? window.innerHeight(document.documentElement as HTMLElement).clientHeight: this.el.clientHeight

    Returns void

Private _updateScrollPositions

  • _updateScrollPositions(): void

Private _updateScrollSize

  • _updateScrollSize(): void

Private _updateScrollable

  • _updateScrollable(): void

by

  • x, yの差分pxを指定しスクロールします。 メソッド、パラメータの詳細はscrollByを参照してください。

    Parameters

    Returns ScrollResult

cancel

  • cancel(): void
  • スクロール中であった場合、スクロールをキャンセルします。

    Returns void

destroy

  • destroy(): void
  • インスタンスの動作を停止し、内部情報を完全に破棄します。 これに伴い、スクロール中であった場合にはキャンセルされ、以後イベント通知は完全に行われません。 またScroller.startメソッドでの再利用も不可となります。 本インスタンスの利用を完全に停止する場合に必ず実行し、利用側のオブジェクト等において本インスタンスへの参照を完全に削除してください。 本メソッドはSPA等でのサービスにおいては意識的に実行する事を強く推奨します。

    Returns void

emit

  • emit<K>(type: K, payload?: undefined | EventMap[K]): void
  • Emit event.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • Optional payload: undefined | EventMap[K]

    Returns void

observe

  • 本インスタンスの情報を購読するためのオブジェクトを設定する事で、 インスタンスの内部情報が変更される度にパラメータが同期されます。 設定するオブジェクトはScrollerObserverのインターフェースを満たしていれば内容は問いません。 本機能により同期される方法は単純にオブジェクトプロパティへの変数代入です。 従って対象となるプロパティをgetterとして実装(Ex: Vue computed等、、)しておく事により、 同期を受け取るオブジェクト側でパラメータ変更後の動作をリアクティブに実装可能です。

    Parameters

    Returns function

    unobserve 同期を停止するためのメソッド

      • (): void
      • Returns void

off

  • off<K>(type: K): void
  • off<K>(type: K, handler: function): void
  • off<K>(type: K, option: object): void
  • off<K>(handler: function): void
  • off<K>(option: object): void
  • Remove listener by type

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K

    Returns void

  • Remove listener by type and handler.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    Returns void

  • Remove listener by type and option.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • option: object
      • Optional handler?: undefined | function
      • Optional tag?: DDEVListenerTag

    Returns void

  • Remove listener by handler.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    Returns void

  • Remove listener by option(tag, handler, tag).

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • option: object
      • Optional handler?: undefined | function
      • Optional tag?: DDEVListenerTag
      • Optional type?: K

    Returns void

offAll

  • offAll(): void
  • Remove all listener instances.

    Returns void

on

  • on<K>(type: K, handler: function): DDEVListener
  • on<K>(type: K, handler: function, option: object): DDEVListener
  • on<K>(type: K, handler: function, option: object, once?: undefined | false | true): DDEVListener
  • on<K>(type: K, option: object): DDEVListener
  • on<K>(option: object): DDEVListener
  • Create and return listener instance by type, handler.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    Returns DDEVListener

  • Create and return listener instance by type, handler, option.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    • option: object
      • Optional immediate?: ImmediateOption
      • Optional once?: undefined | false | true
      • Optional tag?: DDEVListenerTag

    Returns DDEVListener

  • Create and return listener instance by type, handler, once.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    • option: object
      • Optional immediate?: ImmediateOption
      • Optional tag?: DDEVListenerTag
    • Optional once: undefined | false | true

    Returns DDEVListener

  • Create and return listener instance by type, option.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • option: object
      • handler: function
          • (ev: EventMap[K]): any
          • Parameters

            • ev: EventMap[K]

            Returns any

      • Optional immediate?: ImmediateOption
      • Optional once?: undefined | false | true
      • Optional tag?: DDEVListenerTag

    Returns DDEVListener

  • Create and return listener instance by option.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • option: object
      • handler: function
          • (ev: EventMap[K]): any
          • Parameters

            • ev: EventMap[K]

            Returns any

      • Optional immediate?: ImmediateOption
      • Optional once?: undefined | false | true
      • Optional tag?: DDEVListenerTag
      • type: K

    Returns DDEVListener

once

  • once<K>(type: K, handler: function): DDEVListener
  • once<K>(type: K, handler: function, option: object): DDEVListener
  • once<K>(type: K, option: object): DDEVListener
  • once<K>(option: object): DDEVListener
  • Create and return listener instance by type, handler. This listener is deleted when it detects an event only once.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    Returns DDEVListener

  • Create and return listener instance by type, handler, option. This listener is deleted when it detects an event only once.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • handler: function
        • (ev: EventMap[K]): any
        • Parameters

          • ev: EventMap[K]

          Returns any

    • option: object
      • Optional immediate?: ImmediateOption
      • Optional tag?: DDEVListenerTag

    Returns DDEVListener

  • Create and return listener instance by type, option. This listener is deleted when it detects an event only once.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • type: K
    • option: object
      • handler: function
          • (ev: EventMap[K]): any
          • Parameters

            • ev: EventMap[K]

            Returns any

      • Optional immediate?: ImmediateOption
      • Optional tag?: DDEVListenerTag

    Returns DDEVListener

  • Create and return listener instance by option. This listener is deleted when it detects an event only once.

    Type parameters

    • K: keyof ScrollerEventMap

    Parameters

    • option: object
      • handler: function
          • (ev: EventMap[K]): any
          • Parameters

            • ev: EventMap[K]

            Returns any

      • Optional immediate?: ImmediateOption
      • Optional tag?: DDEVListenerTag
      • type: K

    Returns DDEVListener

pushScrollStopper

  • pushScrollStopper(stopper: ScrollStopper): (Anonymous function)

ready

  • ready(): Promise<void>
  • インスタンスが実行可能になった際にresolveされるPromiseインスタンスを返却します。

    Returns Promise<void>

removeScrollStopper

  • スクロールの停止要求を解除します。
    別のプロセスにより異なるScrollStopperが登録されている場合、 スクロールは再開されない事に注意してください。

    Parameters

    Returns void

setElement

  • setElement(el?: Element | string): void
  • インスタンスにElementを設定します。特別な理由(SSRの利用等)によりコンストラクタでElementを指定できない場合、 本メソッドを利用しブラウザコンテキスト配下で本メソッドを実行してください。

    Parameters

    • Optional el: Element | string

      Element、もしくはCSSクエリセレクタ文字列を指定します。

    Returns void

start

  • start(): Promise<void>
  • インスタンスの動作を開始します。本インスタンスはElementが設定され初期化された際に自動で動作を開始しますが、 Scroller.stopメソッドを利用し動作を停止した後に再開する場合に本メソッドを利用します。

    Returns Promise<void>

stop

  • stop(): void
  • インスタンスの動作(スクロール、リサイズイベントの検知等)を停止します。 何らかの理由で動作を停止させたい場合に利用してください。 本メソッドを実行後もインスタンス内の状態は保持されたままです。 完全にインスタンスを破棄するためにはScroller.destroyを利用してください。

    Returns void

to

toBottom

toElement

toJSON

toLeft

toLeftBottom

toLeftTop

toRight

toRightBottom

toRightTop

toSide

toString

  • toString(): string

toTop

unobserve

  • Scroller.observeでパラメータ同期中のオブジェクトを停止します。 Scroller.destroy実行時にも、同期中のオブジェクトは全停止されますが、destroy前に任意のタイミングで停止したい場合 本メソッドを利用します。

    Parameters

    Returns void

update

  • update(): void
  • インスタンス内部のスクロール量や、Elementのサイズを強制的に更新します。 基本的に利用が必要なケースはありませんが、何らかの理由で更新をトリガーしたい場合に利用します。

    Returns void

Object literals

scrollSettingsDefaults

scrollSettingsDefaults: object

スクロール系メソッドScroller.to等を利用する際のデフォルトの設定を示します。

scrollToElementSettingsDefaults

scrollToElementSettingsDefaults: object

Scroller.toElementのデフォルトオプションの設定を示します。

Generated using TypeDoc