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.
47 lines (41 loc) • 1.97 kB
HTML
<html>
<head>
<title>FT scroller demo: horizontal paged, strict</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. No matter how hard you fling...</p></div></section>
<section><div>Page 2<p>... you will only be able to go one page at a time (useful for paginated articles).</p><p>Moves by direct input - mouse or finger on arger pages, or scrollwheels - can continue to scroll further.</div></section>
<section><div>Page 3</div></section>
<section><div>Page 4</div></section>
<section><div>Page 5</div></section>
<section><div>Page 6</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,
singlePageScrolls: true,
scrollbars: false,
bouncing: false
});
</script>
</body>
</html>