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.
45 lines (39 loc) • 1.9 kB
HTML
<html>
<head>
<title>FT scroller demo: horizontal paged</title>
<style>
/* Styles not relevant to scrolling (just to make the demo look neat and tidy) */
body { font-family: sans-serif; -webkit-text-size-adjust: 100% }
#scrollable section:nth-child(2n) { background-color: #eee;}
/* Set the size of the scroller. Visible border to make the demo easier to understand */
#scrollable { white-space: nowrap; width: 600px; height: 400px; border: 1px solid gray; overflow: hidden }
/* Style each 'page' to be the same size and join together into a long horizontal strip. Use display: table on the section wrapper to get rid of whitespace between the inline-blocks. */
#sectionwrapper { width: 3600px; display: table }
#sectionwrapper section { width: 600px; height: 400px; display: inline-block; vertical-align: top;}
#sectionwrapper section div { padding: 50px; overflow: hidden; white-space: normal;}
</style>
</head>
<body>
<div id='scrollable'>
<div id='sectionwrapper'>
<section><div>Page 1<p>Swipe left to scroll the next page into view. If you swipe quickly...</p></div></section>
<section><div>Page 2<p>...lots...</p></div></section>
<section><div>Page 3<p>...and lots...</p></div></section>
<section><div>Page 4<p>...of pages...</p></div></section>
<section><div>Page 5<p>...in one single...</p></div></section>
<section><div>Page 6<p>...scroll movement. FTScroller will snap to the nearest page when the scroll animation comes to rest.</p></div></section>
</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 scroller-->
<script>
var scroller = new FTScroller(document.getElementById('scrollable'), {
scrollingY: false,
snapping: true,
scrollbars: false
});
</script>
</body>
</html>