# Class WScroll

A wave Scrollbar used to scroll the specific content and provides four controls to navigate the content, such as Home/Previous/Next/End, and also supports the mousewheel control.

#### Hierarchy (view full)

- Object
  - WScroll

#####
Index

### Constructors

constructor

### Properties

$oid
anchor
control
drag
edrag
edragBody
eend
epos
node
opts
uid
widget
zcls
$oid
easing

### Accessors

$class

### Methods

$init
$instanceof
$super
$supers
afterCreated_
afterInit
destroy
get$Class
proxy
redraw
syncSize
isAssignableFrom
isInstance

## Constructors

### constructor

- new WScroll(control, opts): WScroll

- #### Parameters

  - ##### control: HTMLElement

  - ##### opts: WScrollOptions

  #### Returns WScroll

  Overrides zk.Object.constructor

## Properties

### $oid

$oid: number = 0

The object ID. Each object has its own unique $oid. It is mainly used for debugging purpose.

Trick: you can test if a JavaScript object is a ZK object by examining this property, such as `if (o.$oid) alert('o is a ZK object');`

Notice: zk.Class extends from zk.Object (so a class also has $oid)

Inherited from zk.Object.$oid

### anchor

anchor: HTMLElement

### control

control: HTMLElement

### drag

drag: Draggable

### edrag

edrag: HTMLElement

### edragBody

edragBody: ChildNode

### eend

eend: HTMLElement

### epos

epos: HTMLElement

### node

node: HTMLElement

### opts

opts: WScrollOptions

The opts of this scrollbar controls.

#### startPosition

int startPosition

Specifies the start position according to the scrolling area, like offset top for the vertical scrolling and offset left for the horizental scrolling.

#### startStep

int startStep

Specifies the start step for the scrolling.

Note: it cannot be negative.

#### endStep

int endStep

Specifies how many steps for the scrolling.

Note: it cannot be negative.

#### viewport

int viewport

Specifies how many steps will show in the viewport.

Note: it cannot be negative.

#### viewportSize

int viewportSize

Specifies how many pixels for the viewport size, like offsetHeight for vertical scrolling and offsetWidth for horizental scrolling.

Note: it cannot be negative.

#### orient

String orient

Specifies either 'vertical' or 'horizontal' to indicate that it can be scrolled only in the vertical or horizontal direction.

#### Default Value

    'horizontal'

    <h4>anchor</h4>
    DOMElement anchor
    <p>Specifies the anchor that indicates the scrollbar will be its child node.

#### Default Value

    the parent node of the control.

    <h4>syncSize</h4>
    boolean syncSize
    <p>Specifies whether to sync the scrolling area size at initial phase.

#### Default Value

`true`.

#### onScrollY

```ts void onScrollY(int step); ```

Specifies the callback function for the vertical scrolling, when user changes the vertical scrolling step.

#### onScrollX

```ts void onScrollX(int step); ```

Specifies the callback function for the horizental scrolling, when user changes the horizental scrolling step.

#### offset

int offset

Specifies the offset for the scrolling step to shift when the callback functions (onScrollX and onScrollY) are invoked. For example, if the offset is 2, then the steps in the onScrollX/Y event will start at 2.

#### Default Value

`0`

### uid

uid: string

### widget

widget: Widget<HTMLElement> & {
_cols?: number;
}

#### Type declaration

- ##### `Optional` _cols?: number

### zcls

zcls: string

### `Static` $oid

$oid: any

Inherited from zk.Object.$oid

### `Static` easing

easing: ((x, t, b, c, d) => number) = easing

Sets the easing animation function for the scrolling effects. For more details, please refer to jquery's easing plugin. http://gsgd.co.uk/sandbox/jquery/easing/

#### Type declaration

- - (x, t, b, c, d): number

  - Sets the easing animation function for the scrolling effects. For more details, please refer to jquery's easing plugin. http://gsgd.co.uk/sandbox/jquery/easing/

    #### Parameters

    - ##### x: number

    - ##### t: number

    - ##### b: number

    - ##### c: number

    - ##### d: number

    #### Returns number

## Accessors

### $class

- get $class(): typeof ZKObject

- The class that this object belongs to.

  #### Returns typeof ZKObject

  Inherited from zk.Object.$class

## Methods

### $init

- $init(props?): void

- The constructor.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

  #### Returns void

  #### Default Value

      it does nothing so the subclass needs not to copy back
      (also harmless to call back).

  #### See

  afterInit

  #### Deprecated

  as of 10.0 released. Using ES6 `constructor` instead.

  Inherited from zk.Object.$init

### $instanceof

- $instanceof(...klass): boolean

- Determines if this object is an instance of the class represented by the specified Class parameter. Example:

      if (obj.$instanceof(zul.wgt.Label, zul.wgt.Image)) {
      }

  #### Parameters

  - ##### `Rest` ...klass: any[]

    the Class object to be checked. Any number of arguments can be specified.

  #### Returns boolean

  true if this object is an instance of the class

  Inherited from zk.Object.$instanceof

### $super

- $super<M, F>(mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  Example: ```ts multiply: function (n) { return this.$super('multiply', n + 2); } ```

  #### Type Parameters

  - #### M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

  - #### F extends any

  #### Parameters

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  Inherited from zk.Object.$super

- $super<M, F>(klass, mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  It is similar to ZKObject.$super, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function (n) { return this.$super(foo.MyClass, 'multiply', n + 2); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  #### Since

  5.0.2

  Inherited from zk.Object.$super

### $supers

- $supers<M, F>(name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  Example: ```ts multiply: function () { return this.$supers('multiply', arguments); } ```

  #### Type Parameters

  - #### M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

  - #### F extends any

  #### Parameters

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  Inherited from zk.Object.$supers

- $supers<M, F>(klass, name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  It is similar to zk.Object.$supers, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function () { return this.$supers(foo.MyClass, 'multiply', arguments); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  #### Since

  5.0.2

  Inherited from zk.Object.$supers

### afterCreated_

- afterCreated_(props?): void

- This function is called after the object is initialized and all its member fields are ready to use.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

    the properties passed by constructor.

  #### Returns void

  #### Since

  10.0.0

  Inherited from zk.Object.afterCreated_

### afterInit

- afterInit(func): void

- Specifies a function that shall be called after the object is initialized, i.e., after zk.Object.$init is called. This method can be called only during the execution of zk.Object.$init.

  It is an advance feature that is used to allow a base class to do something that needs to wait for all deriving classes have been initialized.

  Invocation Sequence:

  - The most derived class's $init (subclass)
  - The based class's $init (if the derived class's $init invokes this.$supers('$init', arguments))
  - The first function, if any, be added with afterInit, then the second (in the same order that afterInit was called)...

  #### Parameters

  - ##### func: CallableFunction

    the function to register for execution later

  #### Returns void

  #### See

  zk.Object.$init

  #### Deprecated

  as of 10.0 released. Using afterCreated_ instead.

  Inherited from zk.Object.afterInit

### destroy

- destroy(): void

- #### Returns void

### get$Class

- get$Class<T>(): T

- #### Type Parameters

  - #### T extends typeof ZKObject

  #### Returns T

  the class of the subsclass which extends from zk.Class.

  #### Since

  10.0.0

  Inherited from zk.Object.get$Class

### proxy

- proxy<A, R>(func): ((...args) => R)

- Proxies a member function such that it can be called with this object in a context that this object is not available. It sounds a bit strange at beginning but useful when passing a member of an object that will be executed as a global function.

  Example: Let us say if you want a member function to be called periodically, you can do as follows. ```ts setInterval(wgt.proxy(wgt.doIt), 1000); //assume doIt is a member function of wgt ```

  With proxy, when doIt is called, this references to wgt. On the other hand, the following won't work since this doesn't reference to wgt, when doIt is called. ```ts setInterval(wgt.doIt, 1000); //WRONG! doIt will not be called with wgt ```

  Notice that this method caches the result so that it will return the same proxied function, if you pass the same function again.

  #### Type Parameters

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((...args) => R)

    a method member of this object

    - - (...args): R

      - #### Parameters

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((...args) => R)

  a function that can be called as a global function (that actually have `this` referencing to this object).

  - - (...args): R

    - #### Parameters

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A, R>(func): ((arg0, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, ...args) => R)

    - - (arg0, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, ...args) => R)

  - - (arg0, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A, R>(func): ((arg0, arg1, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, ...args) => R)

    - - (arg0, arg1, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, ...args) => R)

  - - (arg0, arg1, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A2, A, R>(func): ((arg0, arg1, arg2, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, ...args) => R)

    - - (arg0, arg1, arg2, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, ...args) => R)

  - - (arg0, arg1, arg2, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A2, A3, A, R>(func): ((arg0, arg1, arg2, arg3, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A3

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, arg3, ...args) => R)

    - - (arg0, arg1, arg2, arg3, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### arg3: A3

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, arg3, ...args) => R)

  - - (arg0, arg1, arg2, arg3, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### arg3: A3

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

### redraw

- redraw(p): void

- #### Parameters

  - ##### p: HTMLElement

  #### Returns void

### syncSize

- syncSize(opts?): void

- Syncs the scrolling area and control bar size.

  #### Parameters

  - ##### `Optional` opts: Record<string, unknown>

    the opts can override the initail opts data for resizing.

  #### Returns void

### `Static` isAssignableFrom

- isAssignableFrom(cls): boolean

- Determines if the class by this Class object is either the same as, or is a superclass of, the class represented by the specified Class parameter. Example:

      if (klass1.isAssignableFrom(klass2)) {
      }

  #### Parameters

  - ##### cls: typeof ZKObject

    the Class object to be checked, such as zk.Widget.

  #### Returns boolean

  true if assignable

  Inherited from zk.Object.isAssignableFrom

### `Static` isInstance

- isInstance<T>(this, o): o is InstanceType<T>

- Determines if the specified Object is assignment-compatible with this Class. This method is equivalent to [[zk.Object#$instanceof]. Example:

      if (klass.isInstance(obj)) {
      }

  #### Type Parameters

  - #### T extends typeof ZKObject

  #### Parameters

  - ##### this: T

  - ##### o: unknown

    the object to check

  #### Returns o is InstanceType<T>

  true if the object is an instance

  Inherited from zk.Object.isInstance