ftscroller
Version:
FTScroller is a cross-browser Javascript/CSS library to allow touch, mouse or scrollwheel scrolling within specified elements, with pagination, snapping and bouncing support.
91 lines (81 loc) • 1.93 kB
HTML
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FT scroller demo: Gallery</title>
<style>
.content {
width: 1000px;
height: 3000px;
}
.container {
margin-top: 100px;
width: 100%;
overflow-x: hidden;
overflow-y: visible;
}
.list {
display: flex;
list-style: none;
height: 300px;
padding: 0;
}
.item {
float: left;
width: 25%;
flex: none;
background: #eee;
}
.ftscroller_x {
overflow: visible;
width: 100%;
}
</style>
</head>
<body>
<div class='content'>
<div id='container' class='container'>
<ul class='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
<li class='item'>Item 3</li>
<li class='item'>Item 4</li>
<li class='item'>Item 5</li>
<li class='item'>Item 6</li>
<li class='item'>Item 7</li>
<li class='item'>Item 8</li>
<li class='item'>Item 9</li>
<li class='item'>Item 10</li>
<li class='item'>Item 11</li>
<li class='item'>Item 12</li>
<li class='item'>Item 13</li>
<li class='item'>Item 14</li>
<li class='item'>Item 15</li>
<li class='item'>Item 16</li>
<li class='item'>Item 17</li>
<li class='item'>Item 18</li>
<li class='item'>Item 19</li>
<li class='item'>Item 20</li>
</ul>
</div>
</div>
<!--Include FT Scroller source (can be included at any point as long as it's loaded before being used)-->
<script src='../lib/ftscroller.js'></script>
<!--Set up the scrollers-->
<script>
var containerElement = document.getElementById('container');
var scroller = new FTScroller(containerElement, {
scrollingX: true,
scrollingY: false,
bouncing: false,
flinging: false,
snapping: true,
snapSizeX: 250,
contentWidth: 5000,
invertScrollWheel: false,
scrollResponseBoundary: 30,
scrollBoundary: 30
});
</script>
</body>
</html>