滚动插件
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
CHANGELOG.md
README.md
package.json
rollup.config.js

README.md

tinyjs-plugin-scroller

滚动插件

查看demo

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

引用方法

起步

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

1、最简单的例子

我们通过dom来演示一下:

<div class="cell">
  <div id="J-container" class="container">
    1</br>2</br>3</br>4</br>5</br>6</br>7</br>8</br>9</br>10
  </div>
</div>
// 引用 Tiny.js 源码
<script src="https://gw.alipayobjects.com/as/g/tiny/tiny/1.2.0/tiny.js"></script>
html, body, div {
  margin:0;
  padding:0;
}
.cell {
  height: 400px;
  overflow-y: hidden;
  background-color: #f5f5f5;
}
.container {
  font-size: 72px;
}
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);
});

依赖

API文档

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