weScroll

Touch scroll library for Muti Touch, Zooming, based on IScroll-zom 5

Features

IScroll API
Support Canvas

Usage

import WeScroll from 'we-scroll'

const defaultConfig = {
    zoom: true,
    zoomMin: 0.5,
    startZoom: 1,
    tap: true,
    zoomMax: 2,
    contentWidth: 2000, //width of scrolling area, Canvas needs it
    contentHeight: 1000, //height of scrolling area, Canvas needs it
    render: renderFunc //render function for updating Canvas
}
const scroller = new WeScroll(wrapper, defaultConfig)
scroller.zoom(2)

Some Configs

options.render

This is a callback function for weScroll. WeScroll calls render function when data ( offset , scale ) change. This function take three arguments: offsetX, offsetY, scale.

offsetX, offsetY represents scroller current offset, scale represents scroller current zoom ratio.

Style change like css transform or Canvas redraw logic should run in this function. Such as:

function(offsetX, offsetY, scale){
  var transformStyle = "translate3d(" + offsetX + "px," + offsetY +"px, 0px) scale("+ scale +")";
    target.style.transform = transformStyle;
}

Please make sure the origin for transformations of an element need to be set to:

transform-origin: 0px 0px 0px;

options.contentWidth

Scroll content width，default value is wrapper's client width.

options.contentHeight

Scroll content height，default value is wrapper's client height.

Examples

See examples: npm run static

API reference

WeScroll

weScroll: Canvas scroll library for Muti Touch, Zooming, based on IScroll-zom 5

Kind: global class

WeScroll

new WeScroll(el, options)

create a WeScroll instance

Param	Type	Description
el	`String` \| `HTMLElement`	wrapper of Canvas
options	`Obect`	options for settings