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

• simple

• canvas zoom

• css transform

• transform preview

API reference

WeScroll

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

Kind: global class

• WeScroll
  • new WeScroll(el, options)
  • .resetPosition()
  • .disable()
  • .enable()
  • .refresh()
  • .scrollTo(x, y, time, easing)
  • .zoom(scale, x, y, duration)

new WeScroll(el, options)

create a WeScroll instance

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

weScroll.resetPosition()

reset scroller's position, if out of boundary, reset it back

Kind: instance method of WeScroll

weScroll.disable()

set disable

Kind: instance method of WeScroll

weScroll.enable()

set enable

Kind: instance method of WeScroll

weScroll.refresh()

refresh scroller setttings

Kind: instance method of WeScroll

weScroll.scrollTo(x, y, time, easing)

scroll to specific postion of scroller

Kind: instance method of WeScroll

| Param | Type | Description | | --- | --- | --- | | x | Number | offset x | | y | Number | offset y | | time | Number | transition time | | easing | function | easing funtions |

weScroll.zoom(scale, x, y, duration)

zoom to specific postion of scroller and scale Canvas

Kind: instance method of WeScroll

| Param | Type | Description | | --- | --- | --- | | scale | Number | scale | | x | Number | offset x | | y | Number | offset y | | duration | Number | transition time |

docs autogenerated via jsdoc2md