Scroll

Scroller from normal scroll, pinch & pull

• Usage
• Options
• Public API
• Event API
• Demo

Usage

Callback (first parameter of constructor) is required. Options are optional. Defaults are listed above. The created instance must have proper dimensions using a setDimensions() call. Afterwards you can pass in event data or manually control scrolling/zooming via the API.

import Scroller from '../_util/scroller'

var scroller = new Scroller(function(left, top, zoom) {
	// apply coordinates/zooming
}, {
	scrollingY: false
});

// Configure to have an outer dimension of 1000px and inner dimension of 3000px
scroller.setDimensions(1000, 1000, 3000, 3000);

Options

These are the available options with their defaults. Options can be modified using the second constructor parameter or during runtime by modification of scroller.options.optionName.

• scrollingX = true
• scrollingY = true
• animating = true
• animationDuration = 250
• bouncing = true
• locking = true
• paging = false
• snapping = false
• zooming = false
• minZoom = 0.5
• maxZoom = 3
• scrollingComplete = function () {} // 滚动结束回调

Public API

• Setup scroll object dimensions.
  scroller.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight);

• Setup scroll object position (in relation to the document). Required for zooming to event position (mousewheel, touchmove).
  scroller.setPosition(clientLeft, clientTop);

• Setup snap dimensions (only needed when snapping is enabled)
  scroller.setSnapSize(width, height);

• Setup pull-to-refresh. Height of the info region plus three callbacks which are executed on the different stages.
  scroller.activatePullToRefresh(height, activate, deactivate, start);

• Stop pull-to-refresh session. Called inside the logic started by start callback for activatePullToRefresh call.
  scroller.finishPullToRefresh();

• Zoom to a specific level. Origin defines the pixel position where zooming should centering to. Defaults to center of scroller.
  scroller.zoomTo(level, animate ? false, originLeft ? center, originTop ? center)

• Scroll to a specific position.
  scroller.scrollTo(left, top, animate ? false);

• Get current scroll positions and zooming.
  scroller.getValues() => { left, top, zoom }

• Get max scroll.
  scroller.getScrollMax() => { left, top }

Event API

This API part can be used to pass event data to the scroller to react on user actions.

• doTouchStart(touches, timeStamp)
• doTouchMove(touches, timeStamp, scale)
• doTouchEnd(timeStamp)

For a touch device just pass the native touches event data to the doTouch* methods. On mouse systems one can emulate this data using an array with just one element:

• Touch device: doTouchMove(event.touches, event.timeStamp);
• Mouse device: doTouchMove([{ pageX: event.pageX, pageY: event.pageY }], event.timeStamp);