InfiniteViewer

InfiniteViewer

new InfiniteViewer(_containerElement, viewportElementopt, optionsopt)

Source:
Name Type Default Description
_containerElement HTMLElement
viewportElement? HTMLElement | Partial<InfiniteViewerOptions> {}
options? Partial<InfiniteViewerOptions> {}

Members

(static, constant) PROPERTIES

Source:

(static, constant) OPTIONS

Source:

(static, constant) METHODS

Source:

(static, constant) EVENTS

Source:

(static, constant) CLASS_NAME

Source:

Methods

zoomBy(deltaZoom, optionsopt)

Source:
Set viewer zoom by the given amount
Name Type Description
deltaZoom number | number[]
options? ZoomOptions

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

setZoom(zoom, optionsopt)

Source:
Set viewer zoom
Name Type Description
zoom number | number[]
options? ZoomOptions

setTo(options)

Source:
Since:
Move to that position or zoom.
Name Type Description
options SetOptions

setBy(options)

Source:
Since:
Move by the position or zoom delta value.
Name Type Description
options SetOptions

scrollTo(scrollLeft, scrollTop, optionsopt)

Source:
Scrolls the container to set of coordinates.
Name Type Description
scrollLeft number
scrollTop number
options? ScrollOptions

scrollCenter(optionsopt)

Source:
Scroll the element to the center
Name Type Default Description
options? ScrollCenterOptions {}

scrollBy(deltaX, deltaY, optionsopt)

Source:
Scrolls the container by the given amount.
Name Type Description
deltaX number
deltaY number
options? ScrollOptions

resize()

Source:
Update Viewer Sizes

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Inherited From:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

on(eventName, listeneropt) → {this}

Source:
Inherited From:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

off(eventNameopt, listeneropt) → {this}

Source:
Inherited From:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

getZoomY()

Source:
Since:
Get viewer zoom

getZoomX()

Source:
Since:
Get viewer zoomX

getZoom()

Source:
Get viewer zoom

getWrapper() → {HTMLElement}

Source:
Get Wrapper Element
Returns:
Type
HTMLElement

getWheelContainer() → {HTMLElement}

Source:
Get Wheel Container Element
Returns:
Type
HTMLElement

getViewport() → {HTMLElement}

Source:
Get Viewport Element
Returns:
Type
HTMLElement

getScrollWidth(isZoomopt)

Source:
Gets measurement of the width of an element's content with overflow
Name Type Description
isZoom? boolean

getScrollTop(optionsopt)

Source:
Gets the number of pixels that an element's content is scrolled vertically.
Name Type Default Description
options? GetScollPosOptions | boolean {}

getScrollLeft(optionsopt)

Source:
Gets the number of pixels that an element's content is scrolled vertically.
Name Type Default Description
options? GetScollPosOptions | boolean {}

getScrollHeight(isZoomopt)

Source:
Gets measurement of the height of an element's content with overflow
Name Type Description
isZoom? boolean

getRangeY(isZoomopt, isRealopt)

Source:
get y ranges
Name Type Description
isZoom? boolean
isReal? boolean

getRangeX(isZoomopt, isRealopt)

Source:
get x ranges
Name Type Description
isZoom? boolean
isReal? boolean

getContainer() → {HTMLElement}

Source:
Get Container Element
Returns:
Type
HTMLElement

geScrollArea() → {HTMLElement}

Source:
Get Scroll Area Element
Returns:
Type
HTMLElement

emit(eventName, paramopt) → {boolean}

Source:
Inherited From:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

destroy() → {void}

Source:
Destroy elements, properties, and events.
Returns:
Type
void

Type Definitions

AnimationOptions

Source:
Properties:
easing optional
easing?: (t: number) => number
duration optional
duration?: number
Type:
  • TSInterface

GetScollPosOptions

Source:
Properties:
range optional
Default Value: false
range?: boolean
Whether to get scroll value including range
absolute optional
Default Value: false
absolute?: boolean
How to get scroll pos Whether to calculate scroll amount based on screen (client)
Type:
  • TSInterface

InfiniteViewerOptions

Source:
Properties:
zoom
Default Value: 1
zoom: number
viewer's zoom If you use the zoomX and zoomY properties, don't use the zoom property.
rangeX
Default Value: [-Infinity, Infinity]
rangeX: number[]
Horizontal scroll range [Left, Right]
rangeY
Default Value: [-Infinity, Infinity]
rangeY: number[]
Vertical scroll range [Top, Bottom]
rangeOffsetX
Default Value: [0, 0]
rangeOffsetX: number[]
Horizontal scroll range offset not affected by zoom [Left, Right]
rangeOffsetY
Default Value: [0, 0]
rangeOffsetY: number[]
Vertical scroll range offset not affected by zoom [Top, Bottom]
zoomOffsetX
Default Value: "50%"
zoomOffsetX: number | string
Offset left position for zoom operation
zoomOffsetY
Default Value: "50%"
zoomOffsetY: number | string
Offset top position for zoom operation.
usePinch
Default Value: false
usePinch: boolean
Whether to pinch the scroll motion when the touch event is activated.
useMouseDrag
useMouseDrag: boolean
Whether to use mouse drag
pinchThreshold
Default Value: 50
pinchThreshold: number
Threshold at which pinch can be operated when the usePinch option is used.
useAutoZoom
Default Value: false
useAutoZoom: boolean
Whether zoom automatically updates when pinch occurs through wheel, gesture, or touch
zoomRange
Default Value: [0.001, Infinity]
zoomRange: number[]
Set the zoom range.
zoomRangeX optional
zoomRangeX?: number[]
Use either zoomRange or zoomRangeX.
zoomRangeY optional
zoomRangeY?: number[]
Use either zoomRange or zoomRangeY.
useWheelPinch
Default Value: true
useWheelPinch: boolean
Whether to use wheel pinch. you can pinch using the ctrl key.
wheelPinchKey
Default Value: "ctrl"
wheelPinchKey: "ctrl" | "meta" | "alt" | "shift"
Key to use wheel pinch
useWheelScroll
Default Value: IS_SAFARI
useWheelScroll: boolean
Whether to use wheel scroll. You can scroll smoothly by using the wheel.
useBounceScrollBar
Default Value: false
useBounceScrollBar: boolean
Whether or not to use a scroll bar in the form of a bounce An early version of InfiniteViewer's scroll bar.
useOverflowScroll
Default Value: false
useOverflowScroll: boolean
Whether to scroll when the content is larger than the screen even if the range is limited
useGesture
Default Value: true
useGesture: boolean
Whether to use gestures using trackpad or magic mouse.
maxPinchWheel
Default Value: Infinity
maxPinchWheel: number
The max value of the wheel for pinch. If the wheel weight is too large, it can be adjusted.
wheelScale
Default Value: 0.01
wheelScale: number
Wheel of the delta scale.
wheelContainer optional
Default Value: containerElement
wheelContainer?: HTMLElement | string | {current?: HTMLElement | undefined | null, value?: HTMLElement | undefined | null}
The container element to which the wheel event applies
cspNonce
Default Value: ""
cspNonce: string
add nonce property to style for CSP
displayVerticalScroll
Default Value: true
displayVerticalScroll: boolean
Whether to show vertical scroll bar
displayHorizontalScroll
Default Value: true
displayHorizontalScroll: boolean
Whether to show horizontal scroll bar
margin
Default Value: 500
margin: number
Margin to determine the scroll area.
threshold
Default Value: 100
threshold: number
The size of the area to be infinite scrolled.
useTransform
Default Value: true
useTransform: boolean
Whether to use the transform property. If you don't use it, you can't use zoom.
translateZ
Default Value: 0
translateZ: number
Set translateZ transform.
useResizeObserver
Default Value: false
useResizeObserver: boolean
Whether to use the resize observer
preventWheelClick
Default Value: true
preventWheelClick: boolean
Whether to prevent dragging through the wheel button
zoomX
Since: 0.20.0
zoomX: number
viewer's zoomX If you use the zoom property, don't use the zoomX and zoomY properties.
zoomY
Since: 0.20.0
zoomY: number
viewer's zoomY If you use the zoom property, don't use the zoomX and zoomY properties.
pinchDirection
Since: 0.20.0
Default Value: "all"
pinchDirection: "all" | "horizontal" | "vertical"
pinch direction If only one direction is set, only the zoom value in that direction is changed.
Type:
  • TSInterface

OnAbortPinch

Source:
Properties:
inputEvent
inputEvent: any
Type:
  • TSInterface

OnDrag

Source:
Properties:
inputEvent
inputEvent: any
Type:
  • TSInterface

OnDragEnd

Source:
Properties:
isDrag
isDrag: boolean
isDouble
isDouble: boolean
inputEvent
inputEvent: any
Type:
  • TSInterface

OnDragStart

Source:
Type:
  • TSInterface

OnPinch

Source:
Properties:
rotation
rotation: number
distance
distance: number
scale
scale: number
zoom
zoom: number
zoomX
Since: 0.20.0
zoomX: number
zoomY
Since: 0.20.0
zoomY: number
isWheel
isWheel: boolean
inputEvent
inputEvent: any
clientX
clientX: number
clientY
clientY: number
ratioX
ratioX: number
ratioY
ratioY: number
Type:
  • TSInterface

OnPinchStart

Source:
Properties:
inputEvent
inputEvent: any
stop
stop: () => void
Type:
  • TSInterface

OnScroll

Source:
Properties:
scrollLeft
scrollLeft: number
scrollTop
scrollTop: number
zoomX
zoomX: number
zoomY
zoomY: number
Type:
  • TSInterface

ScrollCenterOptions

Source:
Properties:
easing optional
easing?: (t: number) => number
duration optional
duration?: number
absolute optional
Default Value: false
absolute?: boolean
How to calculate delta and scroll amount Whether to calculate scroll amount based on screen (client)
horizontal optional
horizontal?: boolean
vertical optional
vertical?: boolean
Type:
  • TSInterface

ScrollOptions

Source:
Properties:
easing optional
easing?: (t: number) => number
duration optional
duration?: number
absolute optional
Default Value: false
absolute?: boolean
How to calculate delta and scroll amount Whether to calculate scroll amount based on screen (client)
Type:
  • TSInterface

SetOptions

Source:
Since:
Properties:
easing optional
easing?: (t: number) => number
duration optional
duration?: number
x optional
x?: number
coordinate x to move
y optional
y?: number
coordinate y to move
zoom optional
zoom?: number | number[]
coordinate x to move
zoomOffsetX optional
zoomOffsetX?: number | string
The x, y coordinates of the zoom operation based on the viewport
zoomOffsetY optional
zoomOffsetY?: number | string
The x, y coordinates of the zoom operation based on the viewport
Type:
  • TSInterface

ZoomOptions

Source:
Properties:
easing optional
easing?: (t: number) => number
duration optional
duration?: number
zoomBase optional
Default Value: "screen"
zoomBase?: "screen" | "viewport" | "fixed"
how to calculate zoom offset
zoomOffsetX optional
zoomOffsetX?: number | string
zoomOffsetY optional
zoomOffsetY?: number | string
Type:
  • TSInterface

Events

abortPinch

Source:
the `abortPinch` event fires when `pinch` event does not occur by dragging a certain area.
Type Description
InfiniteViewer.OnAbortPinch Parameters for the abortPinch event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
  {
    usePinch: true,
  }
).on("abortPinch", e => {
  console.log(e.inputEvent);
});

drag

Source:
the `drag` event fires when `touch` does occur.
Type Description
InfiniteViewer.OnDrag Parameters for the `drag` event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
).on("drag", e => {
  console.log(e.inputEvent);
});

dragEnd

Source:
the `dragEnd` event fires when `touchend` does occur.
Type Description
InfiniteViewer.OnDragEnd Parameters for the `dragEnd` event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
).on("dragEnd", e => {
  console.log(e.inputEvent);
});

dragStart

Source:
the `dragStart` event fires when `touchstart` does occur.
Type Description
InfiniteViewer.OnDragStart Parameters for the `dragStart` event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
).on("dragStart", e => {
  console.log(e.inputEvent);
});

pinch

Source:
the `pinch` event fires when two points pinch the viewer The pinchStart and abortPinch events do not occur when pinching through the wheel.
Type Description
InfiniteViewer.OnPinch Parameters for the `pinch` event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
  {
    usePinch: true,
  }
).on("pinch", e => {
  console.log(e.zoom, e.inputEvent);
});

scroll

Source:
The `scroll` event fires when the document view or an element has been scrolled.
Type Description
InfiniteViewer.OnScroll Parameters for the scroll event
Example
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
).on("scroll", () => {
  console.log(viewer.getScrollLeft(), viewer.getScrollTop());
});