Initial commit

e45b6d79 · 陈雨佳 · e45b6d79 · e45b6d79 · e45b6d79 · e45b6d79
Commit e45b6d79 authored Dec 11, 2017 by 陈雨佳
49 changed files
--- a/Gemfile
+++ b/Gemfile
+source 'https://rubygems.org'
+source 'https://rails-assets.org'
+gemspec
--- a/README.md
+++ b/README.md
+# rails-assets-iscroll
+> The Bower package inside a gem
+This gem was automatically generated. You can visit [rails-assets.org](https://rails-assets.org) for more information.
+## Usage
+Add rails-assets source block to your `Gemfile`:
+```ruby
+source "https://rails-assets.org" do
+  gem "rails-assets-iscroll"
+end
+```
+Then, import the asset using Sprockets’ `require` directive:
+```js
+//= require "iscroll"
+```
--- a/Rakefile
+++ b/Rakefile
+require 'bundler/gem_tasks'
--- a/app/assets/documents/iscroll/src/indicator/build.json
+++ b/app/assets/documents/iscroll/src/indicator/build.json
+{
+	"insert": {
+		"OPTIONS": "\t\tresizeScrollbars: true,",
+		"NORMALIZATION": "\tif ( this.options.shrinkScrollbars == 'scale' ) {\n\t\tthis.options.useTransition = false;\n\t}",
+		"_init": "\t\tif ( this.options.scrollbars || this.options.indicators ) {\n\t\t\tthis._initIndicators();\n\t\t}",
+		"_transitionTime": "indicator/_transitionTime.js",
+		"_transitionTimingFunction": "indicator/_transitionTimingFunction.js",
+		"_translate": "indicator/_translate.js"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/infinite/build.json
+++ b/app/assets/documents/iscroll/src/infinite/build.json
+{
+	"insert": {
+		"OPTIONS": "\t\tinfiniteUseTransform: true,\n\t\tdeceleration: 0.004,",
+		"NORMALIZATION": "\tif ( this.options.infiniteElements ) {\n\t\tthis.options.probeType = 3;\n\t}\n\tthis.options.infiniteUseTransform = this.options.infiniteUseTransform && this.options.useTransform;",
+		"_init": "\t\tif ( this.options.infiniteElements ) {\n\t\t\tthis._initInfinite();\n\t\t}"
+	},
+	"replace": {
+		"refresh": "infinite/refresh.js"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/keys/build.json
+++ b/app/assets/documents/iscroll/src/keys/build.json
+{
+	"insert": {
+		"_init": "\t\tif ( this.options.keyBindings ) {\n\t\t\tthis._initKeys();\n\t\t}"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/probe/build.json
+++ b/app/assets/documents/iscroll/src/probe/build.json
+{
+	"insert": {
+		"NORMALIZATION": "\tif ( this.options.probeType == 3 ) {\n\t\tthis.options.useTransition = false;\t}",
+		"_wheel": "\t\tif ( this.options.probeType > 1 ) {\n\t\t\tthis._execEvent('scroll');\n\t\t}",
+		"indicator._move": "probe/indicator._move.js"
+	},
+	"replace": {
+		"_move": "probe/_move.js"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/snap/build.json
+++ b/app/assets/documents/iscroll/src/snap/build.json
+{
+	"insert": {
+		"OPTIONS": "\t\tsnapThreshold: 0.334,",
+		"_end": "snap/_end.js",
+		"refresh": "snap/refresh.js",
+		"_init": "\t\tif ( this.options.snap ) {\n\t\t\tthis._initSnap();\n\t\t}"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/wheel/build.json
+++ b/app/assets/documents/iscroll/src/wheel/build.json
+{
+	"insert": {
+		"OPTIONS": "\t\tmouseWheelSpeed: 20,",
+		"NORMALIZATION": "\tthis.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;",
+		"_init": "\t\tif ( this.options.mouseWheel ) {\n\t\t\tthis._initWheel();\n\t\t}"
+	}
+}
\ No newline at end of file
--- a/app/assets/documents/iscroll/src/zoom/build.json
+++ b/app/assets/documents/iscroll/src/zoom/build.json
+{
+	"insert": {
+		"OPTIONS": "\t\tzoomMin: 1,\n\t\tzoomMax: 4, startZoom: 1,",
+		"DEFAULTS": "\tthis.scale = Math.min(Math.max(this.options.startZoom, this.options.zoomMin), this.options.zoomMax);",
+		"_init": "\t\tif ( this.options.zoom ) {\n\t\t\tthis._initZoom();\n\t\t}"
+	},
+	"replace": {
+		"refresh": "zoom/refresh.js",
+		"_translate": "\t\t\tthis.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ') ' + this.translateZ;"
+	}
+}
\ No newline at end of file
--- a/app/assets/images/iscroll/demos/carousel/gaugin.jpg
+++ b/app/assets/images/iscroll/demos/carousel/gaugin.jpg
--- a/app/assets/images/iscroll/demos/carousel/giotto.jpg
+++ b/app/assets/images/iscroll/demos/carousel/giotto.jpg
--- a/app/assets/images/iscroll/demos/carousel/leonardo.jpg
+++ b/app/assets/images/iscroll/demos/carousel/leonardo.jpg
--- a/app/assets/images/iscroll/demos/carousel/warhol.jpg
+++ b/app/assets/images/iscroll/demos/carousel/warhol.jpg
--- a/app/assets/images/iscroll/demos/minimap/ermine.jpg
+++ b/app/assets/images/iscroll/demos/minimap/ermine.jpg
--- a/app/assets/images/iscroll/demos/parallax/galaxies1.png
+++ b/app/assets/images/iscroll/demos/parallax/galaxies1.png
--- a/app/assets/images/iscroll/demos/parallax/galaxies2.png
+++ b/app/assets/images/iscroll/demos/parallax/galaxies2.png
--- a/app/assets/images/iscroll/demos/parallax/stars.jpg
+++ b/app/assets/images/iscroll/demos/parallax/stars.jpg
--- a/app/assets/javascripts/iscroll.js
+++ b/app/assets/javascripts/iscroll.js
+//= require iscroll/iscroll.js
--- a/app/assets/javascripts/iscroll/iscroll-infinite.js
+++ b/app/assets/javascripts/iscroll/iscroll-infinite.js
--- a/app/assets/javascripts/iscroll/iscroll-lite.js
+++ b/app/assets/javascripts/iscroll/iscroll-lite.js
--- a/app/assets/javascripts/iscroll/iscroll-probe.js
+++ b/app/assets/javascripts/iscroll/iscroll-probe.js
--- a/app/assets/javascripts/iscroll/iscroll-zoom.js
+++ b/app/assets/javascripts/iscroll/iscroll-zoom.js
--- a/app/assets/javascripts/iscroll/iscroll.js
+++ b/app/assets/javascripts/iscroll/iscroll.js
--- a/app/assets/templates/iscroll/demos/2d-scroll/index.html
+++ b/app/assets/templates/iscroll/demos/2d-scroll/index.html
+<!DOCTYPE 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: 2d scroll</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { scrollX: true, freeScroll: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 2000px;
+	-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: #fff;
+}
+p {
+	font-size: 16px;
+	padding: 1.2em;
+	line-height: 200%;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/barebone/index.html
+++ b/app/assets/templates/iscroll/demos/barebone/index.html
+<!DOCTYPE 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: barebone</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper');
+}
+document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
+</script>
+<style>
+body {
+	/* On modern browsers, prevent the whole page to bounce */
+	overflow: hidden;
+}
+#wrapper {
+	position: relative;
+	width: 300px;
+	height: 300px;
+	overflow: hidden;
+	/* Prevent native touch events on Windows */
+	-ms-touch-action: none;
+	/* Prevent the callout on tap-hold and text selection */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	/* Prevent text resize on orientation change, useful for web-apps */
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+	-ms-text-size-adjust: none;
+	-o-text-size-adjust: none;
+	text-size-adjust: none;
+}
+#scroller {
+	position: absolute;
+	/* Prevent elements to be highlighted on tap */
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	/* Put the scroller into the HW Compositing layer right from the start */
+	-webkit-transform: translateZ(0);
+	-moz-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	-o-transform: translateZ(0);
+	transform: translateZ(0);
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="wrapper">
+	<div id="scroller">
+		<p><strong>This demo shows the minimum CSS/HTML/JS configuration you need to run the iScroll. Look at the source code for details.</strong></p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+		<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+	</div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/bounce-easing/index.html
+++ b/app/assets/templates/iscroll/demos/bounce-easing/index.html
+<!DOCTYPE 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: bounce easing</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { bounceEasing: 'elastic', bounceTime: 1200 });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/carousel/index.html
+++ b/app/assets/templates/iscroll/demos/carousel/index.html
+<!DOCTYPE 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>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/click/index.html
+++ b/app/assets/templates/iscroll/demos/click/index.html
+<!DOCTYPE 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: click</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li id="me"><a href="#" onclick="console.log(this.parentNode.style.backgroundColor);this.parentNode.style.backgroundColor=this.parentNode.style.backgroundColor==''?'#a00':'';return false">Click me!</a></li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/event-passthrough/index.html
+++ b/app/assets/templates/iscroll/demos/event-passthrough/index.html
+<!DOCTYPE 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: Event Passthrough</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
+}
+</script>
+<style type="text/css">
+* {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+body,ul,li {
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+body {
+	font-size: 12px;
+	font-family: ubuntu, helvetica, arial;
+}
+#header {
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#wrapper {
+	position: relative;
+	z-index: 1;
+	height: 160px;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+	-ms-touch-action: none;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 2400px;
+	height: 160px;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+}
+#scroller li {
+	width: 120px;
+	height: 160px;
+	float: left;
+	line-height: 160px;
+	border-right: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	background-color: #fafafa;
+	font-size: 14px;
+	overflow: hidden;
+	text-align: center;
+}
+p {
+	font-size: 16px;
+	padding: 1.2em;
+	line-height: 200%;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty cell 1</li>
+			<li>Pretty cell 2</li>
+			<li>Pretty cell 3</li>
+			<li>Pretty cell 4</li>
+			<li>Pretty cell 5</li>
+			<li>Pretty cell 6</li>
+			<li>Pretty cell 7</li>
+			<li>Pretty cell 8</li>
+			<li>Pretty cell 9</li>
+			<li>Pretty cell 10</li>
+			<li>Pretty cell 11</li>
+			<li>Pretty cell 12</li>
+			<li>Pretty cell 13</li>
+			<li>Pretty cell 14</li>
+			<li>Pretty cell 15</li>
+			<li>Pretty cell 16</li>
+			<li>Pretty cell 17</li>
+			<li>Pretty cell 18</li>
+			<li>Pretty cell 19</li>
+			<li>Pretty cell 20</li>
+		</ul>
+	</div>
+</div>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/forms/index.html
+++ b/app/assets/templates/iscroll/demos/forms/index.html
+<!DOCTYPE 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: simple</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { mouseWheel: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li><input type="text"></li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li><input type="checkbox"></li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li><input type="radio"></li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li><textarea></textarea></li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li><select><option>option</option></select></li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/horizontal/index.html
+++ b/app/assets/templates/iscroll/demos/horizontal/index.html
+<!DOCTYPE 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: horizontal scrolling</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, mouseWheel: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 5000px;
+	height: 100%;
+	background-color: #a00;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}
+#scroller li {
+	display: block;
+	float: left;
+	width: 100px;
+	height: 100%;
+	border-right: 1px solid #ccc;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Cell 1</li>
+			<li>Cell 2</li>
+			<li>Cell 3</li>
+			<li>Cell 4</li>
+			<li>Cell 5</li>
+			<li>Cell 6</li>
+			<li>Cell 7</li>
+			<li>Cell 8</li>
+			<li>Cell 9</li>
+			<li>Cell 10</li>
+			<li>Cell 11</li>
+			<li>Cell 12</li>
+			<li>Cell 13</li>
+			<li>Cell 14</li>
+			<li>Cell 15</li>
+			<li>Cell 16</li>
+			<li>Cell 17</li>
+			<li>Cell 18</li>
+			<li>Cell 19</li>
+			<li>Cell 20</li>
+			<li>Cell 21</li>
+			<li>Cell 22</li>
+			<li>Cell 23</li>
+			<li>Cell 24</li>
+			<li>Cell 25</li>
+			<li>Cell 26</li>
+			<li>Cell 27</li>
+			<li>Cell 28</li>
+			<li>Cell 29</li>
+			<li>Cell 30</li>
+			<li>Cell 31</li>
+			<li>Cell 32</li>
+			<li>Cell 33</li>
+			<li>Cell 34</li>
+			<li>Cell 35</li>
+			<li>Cell 36</li>
+			<li>Cell 37</li>
+			<li>Cell 38</li>
+			<li>Cell 39</li>
+			<li>Cell 40</li>
+			<li>Cell 41</li>
+			<li>Cell 42</li>
+			<li>Cell 43</li>
+			<li>Cell 44</li>
+			<li>Cell 45</li>
+			<li>Cell 46</li>
+			<li>Cell 47</li>
+			<li>Cell 48</li>
+			<li>Cell 49</li>
+			<li>Cell 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/infinite/index.html
+++ b/app/assets/templates/iscroll/demos/infinite/index.html
+<!DOCTYPE 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: infinite scrolling</title>
+<script type="text/javascript" src="../../build/iscroll-infinite.js"></script>
+<script type="text/javascript">
+/******************************************************************************
+ *
+ * For the sake of keeping the script dependecy free I'm including a custom
+ * AJAX function. You should probably use a third party plugin
+ *
+ */
+function ajax (url, parms) {
+	parms = parms || {};
+	var req = new XMLHttpRequest(),
+		post = parms.post || null,
+		callback = parms.callback || null,
+		timeout = parms.timeout || null;
+	req.onreadystatechange = function () {
+		if ( req.readyState != 4 ) return;
+		// Error
+		if ( req.status != 200 && req.status != 304 ) {
+			if ( callback ) callback(false);
+			return;
+		}
+		if ( callback ) callback(req.responseText);
+	};
+	if ( post ) {
+		req.open('POST', url, true);
+		req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+	} else {
+		req.open('GET', url, true);
+	}
+	req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+	req.send(post);
+	if ( timeout ) {
+		setTimeout(function () {
+			req.onreadystatechange = function () {};
+			req.abort();
+			if ( callback ) callback(false);
+		}, timeout);
+	}
+}
+/*
+ *****************************************************************************/
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', {
+		mouseWheel: true,
+		infiniteElements: '#scroller .row',
+		//infiniteLimit: 2000,
+		dataset: requestData,
+		dataFiller: updateContent,
+		cacheSize: 1000
+	});
+}
+function requestData (start, count) {
+	ajax('dataset.php?start=' + +start + '&count=' + +count, {
+		callback: function (data) {
+			data = JSON.parse(data);
+			myScroll.updateCache(start, data);
+		}
+	});
+}
+function updateContent (el, data) {
+	el.innerHTML = data;
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+	position: relative;
+}
+#scroller li {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	left: 0;
+	-webkit-transform: translateZ(0);
+	-moz-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	-o-transform: translateZ(0);
+	transform: translateZ(0);
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 16px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li class="row">Row 1</li>
+			<li class="row">Row 2</li>
+			<li class="row">Row 3</li>
+			<li class="row">Row 4</li>
+			<li class="row">Row 5</li>
+			<li class="row">Row 6</li>
+			<li class="row">Row 7</li>
+			<li class="row">Row 8</li>
+			<li class="row">Row 9</li>
+			<li class="row">Row 10</li>
+			<li class="row">Row 11</li>
+			<li class="row">Row 12</li>
+			<li class="row">Row 13</li>
+			<li class="row">Row 14</li>
+			<li class="row">Row 15</li>
+			<li class="row">Row 16</li>
+			<li class="row">Row 17</li>
+			<li class="row">Row 18</li>
+			<li class="row">Row 19</li>
+			<li class="row">Row 20</li>
+			<li class="row">Row 21</li>
+			<li class="row">Row 22</li>
+			<li class="row">Row 23</li>
+			<li class="row">Row 24</li>
+			<li class="row">Row 25</li>
+			<li class="row">Row 26</li>
+			<li class="row">Row 27</li>
+			<li class="row">Row 28</li>
+			<li class="row">Row 29</li>
+			<li class="row">Row 30</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/key-bindings/index.html
+++ b/app/assets/templates/iscroll/demos/key-bindings/index.html
+<!DOCTYPE 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: key bindings</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { keyBindings: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/minimap/index.html
+++ b/app/assets/templates/iscroll/demos/minimap/index.html
+<!DOCTYPE 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: minimap</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', {
+		startX: -359,
+		startY: -85,
+		scrollY: true,
+		scrollX: true,
+		freeScroll: true,
+		mouseWheel: true,
+		indicators: {
+			el: document.getElementById('minimap'),
+			interactive: true
+		}
+	});
+}
+//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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	width: 235px;
+	height: 321px;
+	top: 0;
+	left: 0;
+	background: #555;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	width: 797px;
+	height: 1087px;
+	background: url(ermine.jpg);
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	-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;
+}
+#minimap {
+	position: absolute;
+	z-index: 1;
+	width: 235px;
+	height: 321px;
+	background: url(ermine.jpg);
+	background-size: 235px 321px;
+	top: 0px;
+	left: 245px;
+}
+#minimap-indicator {
+	position: absolute;
+	z-index: 1;
+	border: 1px solid #fe0;
+	box-shadow: 0 0 5px #000;
+	background: rgba(255,255,255,0.15);
+	-webkit-transform: translateZ(0);
+	-moz-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	-o-transform: translateZ(0);
+	transform: translateZ(0);
+}
+#bookmarks {
+	position: absolute;
+	left: 520px;
+	font-size: 1.4em;
+}
+#bookmarks li {
+	margin: 5px 0;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="wrapper">
+	<div id="scroller"></div>
+</div>
+<div id="minimap">
+	<div id="minimap-indicator"></div>
+</div>
+<ul id="bookmarks">
+	<li><a href="javascript:myScroll.scrollTo(-359, -85, 400, IScroll.utils.ease.back)">Face</a></li>
+	<li><a href="javascript:myScroll.scrollTo(-288, -342, 400, IScroll.utils.ease.back)">Necklace</a></li>
+	<li><a href="javascript:myScroll.scrollTo(-264, -658, 400, IScroll.utils.ease.back)">Hand</a></li>
+	<li><a href="javascript:myScroll.scrollTo(-383, -539, 400, IScroll.utils.ease.back)">Ermine</a></li>
+</ul>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/no-transition/index.html
+++ b/app/assets/templates/iscroll/demos/no-transition/index.html
+<!DOCTYPE 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: No transition</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { useTransition: 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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+	-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;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-webkit-transform: translateZ(0);
+	-moz-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	-o-transform: translateZ(0);
+	transform: translateZ(0);
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/parallax/index.html
+++ b/app/assets/templates/iscroll/demos/parallax/index.html
+<!DOCTYPE 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: starfield</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', {
+		mouseWheel: true,
+		indicators: [{
+			el: document.getElementById('starfield1'),
+			resize: false,
+			ignoreBoundaries: true,
+			speedRatioY: 0.4
+		}, {
+			el: document.getElementById('starfield2'),
+			resize: false,
+			ignoreBoundaries: true,
+			speedRatioY: 0.2
+		}]
+	});
+}
+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 */
+	background: #000;
+}
+#wrapper {
+	position: absolute;
+	z-index: 3;
+	width: 100%;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 3;
+	width: 100%;
+	height: 4000px;
+	overflow: hidden;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	-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: url(galaxies1.png);
+}
+.starfield {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	overflow: hidden;
+}
+.starfield div {
+	position: absolute;
+	width: 100%;
+	overflow: hidden;
+	-webkit-transform: translateZ(0);
+	-moz-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	-o-transform: translateZ(0);
+	transform: translateZ(0);
+}
+#starfield1 {
+	z-index: 2;
+}
+#stars1 {
+	z-index: 2;
+	height: 3000px;
+	background: url(galaxies2.png);
+}
+#starfield2 {
+	z-index: 1;
+}
+#stars2 {
+	z-index: 1;
+	height: 2000px;
+	background: url(stars.jpg);
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="wrapper">
+	<div id="scroller"></div>
+</div>
+<div class="starfield" id="starfield1">
+	<div id="stars1"></div>
+</div>
+<div class="starfield" id="starfield2">
+	<div id="stars2"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/probe/index.html
+++ b/app/assets/templates/iscroll/demos/probe/index.html
+<!DOCTYPE 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: probe</title>
+<script type="text/javascript" src="../../build/iscroll-probe.js"></script>
+<script type="text/javascript">
+var myScroll;
+var position;
+function updatePosition () {
+	position.innerHTML = this.y>>0;
+}
+function loaded () {
+	position = document.getElementById('position');
+	myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
+	myScroll.on('scroll', updatePosition);
+	myScroll.on('scrollEnd', updatePosition);
+}
+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 */
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 50%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+#monitor {
+	position: absolute;
+	left: 51%;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="monitor">Y position: <strong id="position">0</strong></div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/scroll-to-element/index.html
+++ b/app/assets/templates/iscroll/demos/scroll-to-element/index.html
+<!DOCTYPE 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: scroll to element</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))">Scroll to element 10</a></li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(25)'), null, null, true)">Center element 25 to screen</a></li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li><a href="javascript:myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(50)'), 1200, null, null, IScroll.utils.ease.elastic)">Scroll to the last element with elastic easing</a></li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/scrollbars/index.html
+++ b/app/assets/templates/iscroll/demos/scrollbars/index.html
+<!DOCTYPE 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: scrollbars</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', {
+		scrollbars: true,
+		mouseWheel: true,
+		interactiveScrollbars: true,
+		shrinkScrollbars: 'scale',
+		fadeScrollbars: true
+	});
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
--- a/app/assets/templates/iscroll/demos/simple/index.html
+++ b/app/assets/templates/iscroll/demos/simple/index.html
+<!DOCTYPE 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: simple</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { mouseWheel: true });
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/snap/index.html
+++ b/app/assets/templates/iscroll/demos/snap/index.html
+<!DOCTYPE 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: snap</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: true,
+		momentum: false,
+		snap: true
+	});
+}
+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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 2000px;
+	height: 2000px;
+	background-color: #a00;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: center;
+}
+#scroller li {
+	display: block;
+	float: left;
+	width: 200px;
+	height: 200px;
+	border-right: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+			<li>Cell</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/styled-scrollbars/index.html
+++ b/app/assets/templates/iscroll/demos/styled-scrollbars/index.html
+<!DOCTYPE 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: styled scrollbars</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { scrollX: true, scrollbars: 'custom' });
+}
+document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
+</script>
+<style type="text/css">
+/* Styled scrollbars */
+.iScrollHorizontalScrollbar {
+	position: absolute;
+	z-index: 9999;
+	height: 16px;
+	left: 2px;
+	right: 2px;
+	bottom: 2px;
+	overflow: hidden;
+}
+.iScrollHorizontalScrollbar.iScrollBothScrollbars {
+	right: 18px;
+}
+.iScrollVerticalScrollbar {
+	position: absolute;
+	z-index: 9999;
+	width: 16px;
+	bottom: 2px;
+	top: 2px;
+	right: 2px;
+	overflow: hidden;
+}
+.iScrollVerticalScrollbar.iScrollBothScrollbars {
+	bottom: 18px;
+}
+.iScrollIndicator {
+	position: absolute;
+	background: #cc3f6e;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
+	border-radius: 8px;
+}
+.iScrollHorizontalScrollbar .iScrollIndicator {
+	height: 100%;
+	background: -moz-linear-gradient(left,  #cc3f6e 0%, #93004e 100%);
+	background: -webkit-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
+	background: -o-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
+	background: -ms-linear-gradient(left,  #cc3f6e 0%,#93004e 100%);
+	background: linear-gradient(to right,  #cc3f6e 0%,#93004e 100%);
+}
+.iScrollVerticalScrollbar .iScrollIndicator {
+	width: 100%;
+	background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
+	background: -webkit-linear-gradient(top,  #cc3f6e 0%,#93004e 100%);
+	background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
+	background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
+	background: linear-gradient(to bottom,  #cc3f6e 0%,#93004e 100%);
+}
+/* end */
+* {
+	-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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 2000px;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/tap/index.html
+++ b/app/assets/templates/iscroll/demos/tap/index.html
+<!DOCTYPE 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: simple</title>
+<script type="text/javascript" src="../../build/iscroll.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', { mouseWheel: true, tap: true });
+	document.getElementById('me').addEventListener('tap', function () {
+		this.style.background = !this.style.background ? '#a00' : '';
+	}, 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 */
+}
+#header {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 45px;
+	line-height: 45px;
+	background: #CD235C;
+	padding: 0;
+	color: #eee;
+	font-size: 20px;
+	text-align: center;
+	font-weight: bold;
+}
+#footer {
+	position: absolute;
+	z-index: 2;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 48px;
+	background: #444;
+	padding: 0;
+	border-top: 1px solid #444;
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 45px;
+	bottom: 48px;
+	left: 0;
+	width: 100%;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="header">iScroll</div>
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li id="me"><strong>Tap me! Tap me! Tap me! Tap me!</strong></li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+<div id="footer"></div>
+</body>
+</html>
\ No newline at end of file
--- a/app/assets/templates/iscroll/demos/zoom/index.html
+++ b/app/assets/templates/iscroll/demos/zoom/index.html
+<!DOCTYPE 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: zoom</title>
+<script type="text/javascript" src="../../build/iscroll-zoom.js"></script>
+<script type="text/javascript">
+var myScroll;
+function loaded () {
+	myScroll = new IScroll('#wrapper', {
+		zoom: true,
+		scrollX: true,
+		scrollY: true,
+		mouseWheel: true,
+		wheelAction: 'zoom'
+	});
+}
+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 */
+}
+#wrapper {
+	position: absolute;
+	z-index: 1;
+	top: 50px;
+	bottom: 50px;
+	left: 50px;
+	right: 50px;
+	background: #ccc;
+	overflow: hidden;
+}
+#scroller {
+	position: absolute;
+	z-index: 1;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	width: 100%;
+	-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;
+}
+#scroller ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+#scroller li {
+	padding: 0 10px;
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px solid #ccc;
+	border-top: 1px solid #fff;
+	background-color: #fafafa;
+	font-size: 14px;
+}
+</style>
+</head>
+<body onload="loaded()">
+<div id="wrapper">
+	<div id="scroller">
+		<ul>
+			<li>Pretty row 1</li>
+			<li>Pretty row 2</li>
+			<li>Pretty row 3</li>
+			<li>Pretty row 4</li>
+			<li>Pretty row 5</li>
+			<li>Pretty row 6</li>
+			<li>Pretty row 7</li>
+			<li>Pretty row 8</li>
+			<li>Pretty row 9</li>
+			<li>Pretty row 10</li>
+			<li>Pretty row 11</li>
+			<li>Pretty row 12</li>
+			<li>Pretty row 13</li>
+			<li>Pretty row 14</li>
+			<li>Pretty row 15</li>
+			<li>Pretty row 16</li>
+			<li>Pretty row 17</li>
+			<li>Pretty row 18</li>
+			<li>Pretty row 19</li>
+			<li>Pretty row 20</li>
+			<li>Pretty row 21</li>
+			<li>Pretty row 22</li>
+			<li>Pretty row 23</li>
+			<li>Pretty row 24</li>
+			<li>Pretty row 25</li>
+			<li>Pretty row 26</li>
+			<li>Pretty row 27</li>
+			<li>Pretty row 28</li>
+			<li>Pretty row 29</li>
+			<li>Pretty row 30</li>
+			<li>Pretty row 31</li>
+			<li>Pretty row 32</li>
+			<li>Pretty row 33</li>
+			<li>Pretty row 34</li>
+			<li>Pretty row 35</li>
+			<li>Pretty row 36</li>
+			<li>Pretty row 37</li>
+			<li>Pretty row 38</li>
+			<li>Pretty row 39</li>
+			<li>Pretty row 40</li>
+			<li>Pretty row 41</li>
+			<li>Pretty row 42</li>
+			<li>Pretty row 43</li>
+			<li>Pretty row 44</li>
+			<li>Pretty row 45</li>
+			<li>Pretty row 46</li>
+			<li>Pretty row 47</li>
+			<li>Pretty row 48</li>
+			<li>Pretty row 49</li>
+			<li>Pretty row 50</li>
+		</ul>
+	</div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/lib/rails-assets-iscroll.rb
+++ b/lib/rails-assets-iscroll.rb
+require "rails-assets-iscroll/version"
+module RailsAssetsIscroll
+  def self.gem_path
+    Pathname(File.realpath(__FILE__)).join('../..')
+  end
+  def self.gem_spec
+    Gem::Specification::load(
+      gem_path.join("rails-assets-iscroll.gemspec").to_s
+    )
+  end
+  def self.load_paths
+    gem_path.join('app/assets').each_child.to_a
+  end
+  def self.dependencies
+    [
+    ]
+  end
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      # Rails -> use app/assets directory.
+    end
+  end
+end
+class RailsAssets
+  @components ||= []
+  class << self
+    attr_accessor :components
+    def load_paths
+      components.flat_map(&:load_paths)
+    end
+  end
+end
+RailsAssets.components << RailsAssetsIscroll
--- a/lib/rails-assets-iscroll/version.rb
+++ b/lib/rails-assets-iscroll/version.rb
+module RailsAssetsIscroll
+  VERSION = "5.2.0"
+end
--- a/rails-assets-iscroll.gemspec
+++ b/rails-assets-iscroll.gemspec
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'rails-assets-iscroll/version'
+Gem::Specification.new do |spec|
+  spec.name          = "rails-assets-iscroll"
+  spec.version       = RailsAssetsIscroll::VERSION
+  spec.authors       = ["rails-assets.org"]
+  spec.description   = ""
+  spec.summary       = ""
+  spec.homepage      = "https://github.com/cubiq/iscroll"
+  spec.files         = `find ./* -type f | cut -b 3-`.split($/)
+  spec.require_paths = ["lib"]
+    spec.post_install_message = "This component doesn't define main assets in bower.json.\nPlease open new pull request in component's repository:\nhttps://github.com/cubiq/iscroll"
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end
--- a/rails-assets-iscroll.json
+++ b/rails-assets-iscroll.json
+{
+  "name": "rails-assets-iscroll",
+  "downloads": null,
+  "version": "5.2.0",
+  "version_downloads": null,
+  "platform": "ruby",
+  "authors": "rails-assets.org",
+  "info": "",
+  "metadata": {
+  },
+  "sha": null,
+  "project_uri": "https://github.com/cubiq/iscroll",
+  "gem_uri": null,
+  "homepage_uri": "https://github.com/cubiq/iscroll",
+  "wiki_uri": null,
+  "documentation_uri": null,
+  "mailing_list_uri": null,
+  "source_code_uri": "https://github.com/cubiq/iscroll",
+  "bug_tracker_uri": null,
+  "dependencies": {
+    "development": [
+    ],
+    "runtime": [
+    ]
+  }
+}