Skip to content

ant-tinyjs/tinyjs-plugin-scroller

Repository files navigation

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

感谢

quentinyang