Scrollable

Moveable. Scrollable

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

Members

getScrollPosition

Source:
Sets a function to get the scroll position. (default: Function)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

scrollable

Source:
Whether or not target can be scrolled to the scroll container (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

moveable.scrollable = true;

scrollContainer

Source:
The container to which scroll is applied (default: container)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

scrollThreshold

Source:
Expand the range of the scroll check area. (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  scrollable: true,
  scrollContainer: document.body,
  scrollThreshold: 0,
  getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
});

Type Definitions

OnScroll

Source:
Properties:
Name Type Description
currentTarget MoveableManagerInterface<any, any> The Moveable instance
moveable MoveableManagerInterface<any, any> The Moveable instance
target HTMLElement | SVGElement The Moveable target
clientX number The horizontal coordinate within the application's client area at which the event occurred.
clientY number The vertical coordinate within the application's client area at which the event occurred.
datas IObject<any> Objects that can send information to the following events.
inputEvent any The mouse or touch input event that is invoking the moveable event
scrollContainer HTMLElement The container corresponding to scrolling area (scrollContainer >= rootContainer >= container)
direction number[] The direction of scrolling [left, top]
Type:
  • TSInterface

OnScrollGroup

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

ScrollableOptions

Source:
Properties:
Name Type Description
scrollable? boolean Whether or not target can be scrolled to the scroll container (default: false)
scrollContainer? MoveableRefType<HTMLElement> The container to which scroll is applied (default: container)
scrollThreshold? number Expand the range of the scroll check area. (default: 0)
getScrollPosition? (e: {scrollContainer: HTMLElement, direction: number[]}) => number[] Sets a function to get the scroll position. (default: Function)
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;
});