iscroll
Version:
Smooth scrolling for the web
173 lines (148 loc) • 3.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: carousel</title>
<script type="text/javascript" src="../../build/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#viewport {
position: relative;
width: 320px;
height: 240px;
margin: 0 auto;
background: #444;
overflow: hidden;
}
#wrapper {
width: 200px;
height: 240px;
margin: 0 auto;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 800px;
height: 240px;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
background-color: #444;
}
.slide {
width: 200px;
height: 240px;
float: left;
}
.painting {
width: 140px;
height: 200px;
border-radius: 10px;
margin: 20px auto;
border: 1px solid #000;
box-shadow:
inset 2px 2px 6px rgba(255,255,255,0.6),
inset -2px -2px 6px rgba(0,0,0,0.6),
0 1px 8px rgba(0,0,0,0.8);
}
.giotto {
background: url(giotto.jpg);
}
.leonardo {
background: url(leonardo.jpg);
}
.gaugin {
background: url(gaugin.jpg);
}
.warhol {
background: url(warhol.jpg);
}
#indicator {
position: relative;
width: 110px;
height: 20px;
margin: 10px auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);
}
#dotty {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: #777;
}
</style>
</head>
<body onload="loaded()">
<div id="viewport">
<div id="wrapper">
<div id="scroller">
<div class="slide">
<div class="painting giotto"></div>
</div>
<div class="slide">
<div class="painting leonardo"></div>
</div>
<div class="slide">
<div class="painting gaugin"></div>
</div>
<div class="slide">
<div class="painting warhol"></div>
</div>
</div>
</div>
</div>
<div id="indicator">
<div id="dotty"></div>
</div>
</body>
</html>