Scrollable

Moveable. Scrollable

Source:
Whether or not target can be scrolled to the scroll container (default: false)

Type Definitions

OnScroll

Source:
Properties:
currentTarget
currentTarget: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
moveable
moveable: MoveableManagerInterface<Record<string, any>, Record<string, any>>
The Moveable instance
target
target: HTMLElement | SVGElement
The Moveable's target
clientX
clientX: number
The horizontal coordinate within the application's client area at which the event occurred.
clientY
clientY: number
The vertical coordinate within the application's client area at which the event occurred.
isFirstDrag
isFirstDrag: number
Whether this is the first drag in the drag event
datas
datas: IObject<any>
Objects that can send information to the following events.
inputEvent
inputEvent: any
The mouse or touch input event that is invoking the moveable event
stopAble
stopAble: () => void
Stop the currently working able.
stopDrag
stopDrag: () => void
Calling `stopDrag` in a drag-related event ends the drag.
isTrusted
isTrusted: boolean
Whether the event did not occur externally
scrollContainer
scrollContainer: HTMLElement
The container corresponding to scrolling area (scrollContainer >= rootContainer >= container)
direction
direction: number[]
The direction of scrolling [left, top]
Type:
  • TSInterface

OnScrollGroup

Source:
Properties:
targets
targets: Array<HTMLElement | SVGElement>
targets set to group.
Type:
  • TSInterface

ScrollableOptions

Source:
Properties:
scrollable optional
Default Value: false
scrollable?: boolean
Whether or not target can be scrolled to the scroll container
scrollContainer optional
Default Value: container
scrollContainer?: MoveableRefType<HTMLElement>
The container to which scroll is applied
scrollThreshold optional
Default Value: 0
scrollThreshold?: number
Expand the range of the scroll check area.
scrollThrottleTime optional
Default Value: 0
scrollThrottleTime?: number
Time interval that occurs when scrolling occurs when dragging is maintained If set to 0, it does not occur.
getScrollPosition optional
Default Value: scrollContainer's scrollTop, scrollLeft
getScrollPosition?: (e: {scrollContainer: HTMLElement, direction: number[]}) => number[]
Sets a function to get the scroll position.
scrollOptions optional
Since: 0.43.0
Story Example: support-scroll--scrolling-scrollable
scrollOptions?: Partial<DragScrollOptions> | null
Option to scroll with dragging
Examples 
const scrollOptions = {
    container: () => viewer.getContainer(),
    threshold: 20,
    getScrollPosition: () => {
        return [
            viewer.getScrollLeft({ absolute: true }),
            viewer.getScrollTop({ absolute: true }),
        ];
    },
};
Type:
  • TSInterface

Events

scroll

Source:
When the drag cursor leaves the scrollContainer, the `scroll` event occur to scroll.
Type Description
Moveable.Scrollable.OnScroll Parameters for the `scroll` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

scrollGroup

Source:
When the drag cursor leaves the scrollContainer, the `scrollGroup` event occur to scroll in group.
Type Description
Moveable.Scrollable.OnScrollGroup Parameters for the `scrollGroup` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: [].slice.call(document.querySelectorAll(".target")),
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});