Interface CbnInfiniteViewerOptions

extended options for InfiniteViewer with additional custom options

interface CbnInfiniteViewerOptions {
    cspNonce: string;
    disablePan: boolean;
    disableZoom: boolean;
    displayHorizontalScroll: boolean;
    displayVerticalScroll: boolean;
    horizontalScrollElement: HTMLElement;
    margin: number;
    maxPinchWheel: number;
    pinchDirection: "all" | "horizontal" | "vertical";
    pinchThreshold: number;
    preventWheelClick: boolean;
    rangeOffsetX: number[];
    rangeOffsetY: number[];
    rangeX: number[];
    rangeY: number[];
    scrollAreaElement: HTMLElement;
    threshold: number;
    translateZ: number;
    useAutoZoom: boolean;
    useBounceScrollBar: boolean;
    useGesture: boolean;
    useMouseDrag: boolean;
    useOverflowScroll: boolean;
    usePinch: boolean;
    useResizeObserver: boolean;
    useTransform: boolean;
    useWheelPinch: boolean;
    useWheelScroll: boolean;
    verticalScrollElement: HTMLElement;
    wheelContainer?: string | HTMLElement | {
        current?: null | HTMLElement;
        value?: null | HTMLElement;
    };
    wheelPinchKey: "shift" | "meta" | "ctrl" | "alt";
    wheelScale: number;
    wrapperElement: HTMLElement;
    zoom: number;
    zoomOffsetX: string | number;
    zoomOffsetY: string | number;
    zoomRange: number[];
    zoomRangeX?: number[];
    zoomRangeY?: number[];
    zoomX: number;
    zoomY: number;
}

Hierarchy

  • InfiniteViewerOptions
    • CbnInfiniteViewerOptions

Properties

cspNonce disablePan disableZoom displayHorizontalScroll displayVerticalScroll horizontalScrollElement margin maxPinchWheel pinchDirection pinchThreshold preventWheelClick rangeOffsetX rangeOffsetY rangeX rangeY scrollAreaElement threshold translateZ useAutoZoom useBounceScrollBar useGesture useMouseDrag useOverflowScroll usePinch useResizeObserver useTransform useWheelPinch useWheelScroll verticalScrollElement wheelContainer? wheelPinchKey wheelScale wrapperElement zoom zoomOffsetX zoomOffsetY zoomRange zoomRangeX? zoomRangeY? zoomX zoomY

Properties

cspNonce

cspNonce: string

add nonce property to style for CSP

Default

""

disablePan

disablePan: boolean

disableZoom

disableZoom: boolean

displayHorizontalScroll

displayHorizontalScroll: boolean

Whether to show horizontal scroll bar

Default

true

displayVerticalScroll

displayVerticalScroll: boolean

Whether to show vertical scroll bar

Default

true

Private horizontalScrollElement

horizontalScrollElement: HTMLElement

margin

margin: number

Margin to determine the scroll area.

Default

500

maxPinchWheel

maxPinchWheel: number

The max value of the wheel for pinch. If the wheel weight is too large, it can be adjusted.

Default

Infinity

pinchDirection

pinchDirection: "all" | "horizontal" | "vertical"

pinch direction If only one direction is set, only the zoom value in that direction is changed.

Since

0.20.0

Default

"all"

pinchThreshold

pinchThreshold: number

Threshold at which pinch can be operated when the usePinch option is used.

Default

50

preventWheelClick

preventWheelClick: boolean

Whether to prevent dragging through the wheel button

Default

true

rangeOffsetX

rangeOffsetX: number[]

Horizontal scroll range offset not affected by zoom [Left, Right]

Default

[0, 0]

rangeOffsetY

rangeOffsetY: number[]

Vertical scroll range offset not affected by zoom [Top, Bottom]

Default

[0, 0]

rangeX

rangeX: number[]

Horizontal scroll range [Left, Right]

Default

[-Infinity, Infinity]

rangeY

rangeY: number[]

Vertical scroll range [Top, Bottom]

Default

[-Infinity, Infinity]

Private scrollAreaElement

scrollAreaElement: HTMLElement

threshold

threshold: number

The size of the area to be infinite scrolled.

Default

100

translateZ

translateZ: number

Set translateZ transform.

Default

0

useAutoZoom

useAutoZoom: boolean

Whether zoom automatically updates when pinch occurs through wheel, gesture, or touch

Default

false

useBounceScrollBar

useBounceScrollBar: boolean

Whether or not to use a scroll bar in the form of a bounce An early version of InfiniteViewer's scroll bar.

Default

false

useGesture

useGesture: boolean

Whether to use gestures using trackpad or magic mouse.

Default

true

useMouseDrag

useMouseDrag: boolean

Whether to use mouse drag

useOverflowScroll

useOverflowScroll: boolean

Whether to scroll when the content is larger than the screen even if the range is limited

Default

false

usePinch

usePinch: boolean

Whether to pinch the scroll motion when the touch event is activated.

Default

false

useResizeObserver

useResizeObserver: boolean

Whether to use the resize observer

Default

false

useTransform

useTransform: boolean

Whether to use the transform property. If you don't use it, you can't use zoom.

Default

true

useWheelPinch

useWheelPinch: boolean

Whether to use wheel pinch. you can pinch using the ctrl key.

Default

true

useWheelScroll

useWheelScroll: boolean

Whether to use wheel scroll. You can scroll smoothly by using the wheel.

Default

IS_SAFARI

Private verticalScrollElement

verticalScrollElement: HTMLElement

Optional wheelContainer

wheelContainer?: string | HTMLElement | {
    current?: null | HTMLElement;
    value?: null | HTMLElement;
}

The container element to which the wheel event applies

Type declaration

  • Optional current?: null | HTMLElement
  • Optional value?: null | HTMLElement

Default

containerElement

wheelPinchKey

wheelPinchKey: "shift" | "meta" | "ctrl" | "alt"

Key to use wheel pinch

Default

"ctrl"

wheelScale

wheelScale: number

Wheel of the delta scale.

Default

0.01

Private wrapperElement

wrapperElement: HTMLElement

zoom

zoom: number

viewer's zoom If you use the zoomX and zoomY properties, don't use the zoom property.

Default

1

zoomOffsetX

zoomOffsetX: string | number

Offset left position for zoom operation

Default

"50%"

zoomOffsetY

zoomOffsetY: string | number

Offset top position for zoom operation.

Default

"50%"

zoomRange

zoomRange: number[]

Set the zoom range.

Default

[0.001, Infinity]

Optional zoomRangeX

zoomRangeX?: number[]

Use either zoomRange or zoomRangeX.

Optional zoomRangeY

zoomRangeY?: number[]

Use either zoomRange or zoomRangeY.

zoomX

zoomX: number

viewer's zoomX If you use the zoom property, don't use the zoomX and zoomY properties.

Since

0.20.0

zoomY

zoomY: number

viewer's zoomY If you use the zoom property, don't use the zoomX and zoomY properties.

Since

0.20.0

Settings

Member Visibility

Theme

On This Page

cspNoncedisablePandisableZoomdisplayHorizontalScrolldisplayVerticalScrollhorizontalScrollElementmarginmaxPinchWheelpinchDirectionpinchThresholdpreventWheelClickrangeOffsetXrangeOffsetYrangeXrangeYscrollAreaElementthresholdtranslateZuseAutoZoomuseBounceScrollBaruseGestureuseMouseDraguseOverflowScrollusePinchuseResizeObserveruseTransformuseWheelPinchuseWheelScrollverticalScrollElementwheelContainerwheelPinchKeywheelScalewrapperElementzoomzoomOffsetXzoomOffsetYzoomRangezoomRangeXzoomRangeYzoomXzoomY