zscroller

dom scroller based on zynga scroller

Example

online example: http://yiminghe.github.io/zscroller/

install

API

typed

interface ViewportSize {
    width: number;
    height: number;
}
interface ContentSize {
    width: number;
    height: number;
}
interface X {
    // scrollbar x size
    width: number;
    height?: number;
    scrollbar?: {
        style: any;
    };
    indicator?: {
        style: any;
    };
}
interface Y {
    width?: number;
     // scrollbar y height
    height: number;
    scrollbar?: {
        style: any;
    };
    indicator?: {
        style: any;
    };
}

//  minZoom defaults to 0.1
//  maxZoom defaults to 10
// locking defaults to true
//  defaultScrollX defaults to 0
//  defaultScrollY defaults to 0
//  defaultZoom defaults to 1
interface IZScrollerOption {
  minZoom?: number;
  maxZoom?: number;
  minIndicatorSize?: number;
  zooming?: boolean;
  locking?: boolean;
  viewport: IViewportSize;
  content: IContentSize;
  x?: X;
  y?: Y;
  defaultScrollX?:number;
  defaultScrollY?:number;
  defaultZoom?:number;
  container?: HTMLElement;
  scrollingComplete?: () => any;
  onScroll?: (x: number, y: number, zoom: number) => any;
}
declare class ZScroller {
    constructor(_options: ZScrollerOption);
    scrollTo(x: number, y: number, animate: boolean): void;
    scrollBy(x: number, y: number, animate: boolean): void;
    getScrollbar(type: any): HTMLElement;
    getScrollPosition(): {x:number;y:number;};
    setDisabled(disabled: any): void;
    // relayout
    setDimensions({ viewport, content, x, y, }?: {
        viewport?: ViewportSize;
        content?: ContentSize;
        x?: X;
        y?: Y;
    }): void;
    destroy(): void;
}

usage

import ZScroller from 'zscroller';

const zscroller = new ZScroller({
    container: container,
    viewport: {
      height: container.clientHeight - 20, // padding
      width: container.clientWidth - 20,
    },
    content: {
      width: content.offsetWidth,
      height: content.offsetHeight
    },
    x: {
      width: container.current.clientWidth - 4, // padding

    },
    y: {
      height: container.current.clientHeight - 4, // padding
    },
    onScroll(left, top) {
      content.style.transform = `translate3d(${-left}px,${-top}px,0)`
      content.style.webkitTransform = `translate3d(${-left}px,${-top}px,0)`;
    }
  });
container.appendChild(zscroller.getScrollbar('x'));
container.appendChild(zscroller.getScrollbar('y'));

License

zscroller is released under the MIT license.

Current Tags

0.7.1 ... latest (5 years ago)

62 Versions

0.7.1 ... 5 years ago
0.7.0 ... 5 years ago
0.6.15 ... 5 years ago
0.6.14 ... 6 years ago
0.6.13 ... 6 years ago
0.6.12 ... 6 years ago
0.6.11 ... 6 years ago
0.6.10 ... 6 years ago
0.6.9 ... 6 years ago
0.6.8 ... 6 years ago
0.6.7 ... 6 years ago
0.6.6 ... 6 years ago
0.6.5 ... 6 years ago
0.6.4 ... 6 years ago
0.6.3 ... 6 years ago
0.6.2 ... 6 years ago
0.6.1 ... 6 years ago
0.6.0 ... 6 years ago
0.6.0-beta.18 ... 6 years ago
0.6.0-beta.17 ... 6 years ago
0.6.0-beta.16 ... 6 years ago
0.6.0-beta.15 ... 6 years ago
0.6.0-beta.14 ... 6 years ago
0.6.0-beta.13 ... 6 years ago
0.6.0-beta.12 ... 6 years ago
0.6.0-beta.11 ... 6 years ago
0.6.0-beta.10 ... 6 years ago
0.6.0-beta.9 ... 6 years ago
0.6.0-beta.8 ... 6 years ago
0.6.0-beta.7 ... 6 years ago
0.6.0-beta.6 ... 6 years ago
0.6.0-beta.5 ... 6 years ago
0.6.0-beta.4 ... 6 years ago
0.6.0-beta.3 ... 6 years ago
0.6.0-beta.2 ... 6 years ago
0.6.0-beta.1 ... 6 years ago
0.6.0-beta.0 ... 6 years ago
0.5.4 ... 7 years ago
0.5.3 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.8 ... 8 years ago
0.4.7 ... 8 years ago
0.4.6 ... 8 years ago
0.4.5 ... 8 years ago
0.4.4 ... 8 years ago
0.4.3 ... 9 years ago
0.4.1 ... 9 years ago
0.4.0 ... 9 years ago
0.3.1 ... 9 years ago
0.3.0 ... 9 years ago
0.2.5 ... 9 years ago
0.2.4 ... 9 years ago
0.2.3 ... 10 years ago
0.2.2 ... 10 years ago
0.2.1 ... 10 years ago
0.2.0 ... 10 years ago
0.1.2 ... 10 years ago
0.1.1 ... 10 years ago
0.1.0 ... 10 years ago
0.0.0 ... 10 years ago