tinyjs-plugin-scroller
Version:
56 lines (52 loc) • 1.68 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tinyjs-plugin-scroller DEMO</title>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no,email=no" name="format-detection"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<style>
html, body, p, div {margin:0;padding:0;}
.cell {
height: 400px;
overflow-y: hidden;
background-color: #f5f5f5;
}
.container {
font-size: 72px;
}
</style>
</head>
<body>
<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>
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.2.4/tiny.js"></script>
<script src="../dist/index.debug.js"></script>
<script type="text/javascript">
var container = document.getElementById('J-container');
var scroller = new Tiny.Scroller(function (left, top, zoom) {
container.style.transform = 'translateY('+ -top +'px)';
}, {
scrollingY: true,
});
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);
});
</script>
</body>
</html>