tinyjs-plugin-scroller

> 滚动插件

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-scroller.html#demo

引用方法

- 推荐作为依赖使用

- npm install tinyjs-plugin-scroller --save

- 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：

- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-scroller/0.1.1/dist/index.js
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-scroller/0.1.1/dist/index.debug.js

起步

首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！

##### 1、最简单的例子

我们通过dom来演示一下：

`` html



// 引用 Tiny.js 源码

`

` css
html, body, div {
margin:0;
padding:0;
}
.cell {
height: 400px;
overflow-y: hidden;
background-color: #f5f5f5;
}
.container {
font-size: 72px;
}
`

` js
require('tinyjs-plugin-scroller');
// 或者
// import Scroller from 'tinyjs-plugin-scroller';

var container = document.getElementById('J-container');
var scroller = new Tiny.Scroller(function (left, top, zoom) {
container.style.transform = 'translateY('+ -top +'px)';
}, {
scrollingY: true,
});
// 设置滚动的规模，参数依次是 clientWidth, clientHeight, contentWidth, contentHeight
scroller.setDimensions(window.innerWidth, 400, container.clientWidth, container.clientHeight);
// 按下时的事件监听
container.addEventListener('touchstart', function (e) {
scroller.doTouchStart(e.touches || [e], e.timeStamp);
});
// 移动时的事件监听
container.addEventListener('touchmove', function (e) {
scroller.doTouchMove(e.touches || [e], e.timeStamp, e.scale);
});
// 抬起时的事件监听
container.addEventListener('touchend', function (e) {
scroller.doTouchEnd(e.timeStamp);
});
// 移出屏幕／取消的事件监听
container.addEventListener('touchcancel', function (e) {
scroller.doTouchEnd(e.timeStamp);
});
`

依赖


- Tiny.js`: Link

API文档

http://tinyjs.net/plugins/tinyjs-plugin-scroller.html#docs

感谢

quentinyang