Skip to content

Instantly share code, notes, and snippets.

@jamessanders
Last active December 15, 2015 02:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamessanders/0e28e2fda0b87e685c13 to your computer and use it in GitHub Desktop.
Save jamessanders/0e28e2fda0b87e685c13 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.head {
height: 48px;
background: yellow;
}
.yui3-scrollview {
-ms-touch-action: pan-y !important;
}
ul {
font-size: 0px;
}
li {
font-size: 18px;
}
.page {
height: 200px;
display: inline-block;
}
.page.one {
background: orange;
}
.page.two {
background: pink;
}
.page.three {
background: cyan;
}
.lower {
height: 1000px;
background: skyblue;
}
.head, .lower, p {
padding: 10px;
font-family: sans-serif;
}
</style>
<script type="text/javascript">
YUI().use("scrollview", "scrollview-paginator", function(Y) {
var width = Y.one("body").get("offsetWidth");
Y.all(".page").setStyle("width", width + "px");
Y.one("#test ul").setStyle("width", (width * 6) + 10 + "px");
var scrollview = new Y.ScrollView({
srcNode:"#test",
width: "100%",
scrollY: 0,
flick: {
minDistance: 6,
minVelocity: 0.3,
axis: "x"
}
});
scrollview.plug(Y.Plugin.ScrollViewPaginator, {
selector: ".page"
});
scrollview._prevent.move = false;
scrollview.render();
var i = 0;
scrollview.pages.on("indexChange", function() {
Y.one(".lower").prepend("<div>swiped: " + (++i) + "</div>");
});
});
</script>
</head>
<body>
<div class="head">
header
</div>
<div id="test">
<ul>
<li class="page one"><p>page 1 (swipe me)</p></li>
<li class="page two"><p>page 2</p></li>
<li class="page three"><p>page 3</p></li>
<li class="page one"><p>page 4</p></li>
<li class="page two"><p>page 5</p></li>
<li class="page three"><p>page 6</p></li>
</ul>
</div>
<div class="lower">
lower content
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment