Bugfix for mobile applications

When using iScroll the calculation of the scroll position was actually wrong, because instead of really scrolling the container, iScroll moves the content element. To fix this a new method was added to the controller, that allows for custom functions for the scroll position calculation. When adding iScroll users should now define a function to calculate the correct scroll position. Example: controller.scrollPos(function () { return -myScroll.y; }); I also updated the main demo page to be mobile compatible.
janpaepke · Mar 8, 2014 · ef34a4d · ef34a4d
1 parent 95de841
commit ef34a4d
Show file tree

Hide file tree

Showing 15 changed files with 413 additions and 72 deletions.
diff --git a/ScrollMagic.jquery.json b/ScrollMagic.jquery.json
@@ -1,6 +1,6 @@
 {
     "name": "ScrollMagic",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "title": "ScrollMagic",
     "author": {
         "name": "Jan Paepke",

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ScrollMagic",
   "description": "The jQuery plugin for magical scroll interactions.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "http://janpaepke.github.io/ScrollMagic/",
   "author": {
     "name": "Jan Paepke",

diff --git a/css/demo.css b/css/demo.css
@@ -56,6 +56,19 @@ div#content-wrapper {
 	min-width: 900px;
 	min-height: 500px;
 }
+html.touch div#content-wrapper {
+	min-width: 700px;
+}
+.scrollContainer {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	min-width: 650px;
+	width: 100%
+}
+.scrollContent {
+	position: relative;
+	/*height: 100%;*/
+}
 section {
 	height: 100%;
 }
@@ -306,6 +319,9 @@ h3 {
 	left: -118px;
 	top: -24px;
 }
+#info ul.nexttohat {
+	padding-left: 158px;
+}
 #speechbubble p {
 	margin: 0;
 	text-align: center;
@@ -323,4 +339,25 @@ h3 {
 }
 a:hover #speechbubble p:last-child {
 	text-decoration: underline;
+}
+html.touch body {
+	font-size: 25px;
+}
+html.touch #info #hatcontainer {
+	margin-bottom: 260px;
+	height: 300px;
+	width: 240px;
+}
+html.touch #info #hatcontainer .hat {
+	left: 90px;
+}
+html.touch #info #hatcontainer #bunny {
+	left: 110px;
+}
+html.touch #info #hatcontainer #speechbubble {
+	left: -20px;
+	top: 35px;
+}
+html.touch #info ul.nexttohat {
+	padding-left: 240px;
 }
diff --git a/docs/ScrollMagic.html b/docs/ScrollMagic.html
@@ -550,7 +550,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-200">line 200</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-208">line 208</a>
     </li></ul></dd>
 
 
@@ -709,7 +709,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-415">line 415</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-456">line 456</a>
     </li></ul></dd>
 
 
@@ -860,7 +860,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-391">line 391</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-432">line 432</a>
     </li></ul></dd>
 
 
@@ -1022,7 +1022,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-334">line 334</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-375">line 375</a>
     </li></ul></dd>
 
 
@@ -1176,7 +1176,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-367">line 367</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-408">line 408</a>
     </li></ul></dd>
 
 
@@ -1321,7 +1321,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-237">line 237</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-245">line 245</a>
     </li></ul></dd>
 
 
@@ -1369,6 +1369,163 @@ <h5>Example</h5>
 
 
 
+<dt>
+    <h4 class="name" id="scrollPos"><span class="type-signature"></span>scrollPos<span class="signature">(<span class="optional">newLoglevel</span>)</span><span class="type-signature"> &rarr; {number|<a href="ScrollMagic.html">ScrollMagic</a>}</span></h4>
+
+
+</dt>
+<dd>
+
+
+    <div class="description">
+        <p><strong>Get</strong> or <strong>Set</strong> the current scrollPosition.<br>Watch out: this will permanently overwrite the controller's scrollPos calculation.<br>If you set it to a number it will always have this value.<br>It usually makes more sense to pass a function, when the scrollPosition calculation is not defined by the containers scrollTop or scrollLeft values.<br>This may be the case for mobile applications using iScroll, as there a child container is moved, instead of actually scrolling the container.<br>Please also mind that your function should return y values for vertical scrolls an x for horizontals.</p>
+    </div>
+
+
+
+
+
+
+
+        <h5>Parameters:</h5>
+
+
+<table class="params table table-striped">
+    <thead>
+	<tr>
+
+		<th>Name</th>
+
+
+		<th>Type</th>
+
+
+		<th>Argument</th>
+
+
+
+
+		<th class="last">Description</th>
+	</tr>
+	</thead>
+
+	<tbody>
+
+
+        <tr>
+
+                <td class="name"><code>newLoglevel</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">number</span>
+|
+
+<span class="param-type">function</span>
+
+
+
+            </td>
+
+
+                <td class="attributes">
+
+                    &lt;optional><br>
+
+
+
+
+
+                </td>
+
+
+
+
+            <td class="description last"><p>The new value or function used for the scroll position of the container.</p></td>
+        </tr>
+
+
+	</tbody>
+</table>
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-343">line 343</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+    <h5>Returns:</h5>
+
+
+<div class="param-desc tag-returns">
+    <p>Current scroll position or parent object for chaining.</p>
+
+	{
+<span class="param-type">number</span>
+|
+
+<span class="param-type"><a href="ScrollMagic.html">ScrollMagic</a></span>
+
+}
+
+</div>
+
+
+
+
+
+        <h5>Example</h5>
+
+    <pre class="sunlight-highlight-javascript">// get the current scroll Positionvar scrollPos = controller.scrollPos();// set a new scrollPos calculation functioncontroller.scrollPos(function () {	return this.info("vertical") ? -$mychildcontainer.y : -$mychildcontainer.x});</pre>
+
+
+
+</dd>
+
+
+
 <dt>
     <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(<span class="optional">immediately</span>)</span><span class="type-signature"> &rarr; {<a href="ScrollMagic.html">ScrollMagic</a>}</span></h4>
 
@@ -1480,7 +1637,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-306">line 306</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-314">line 314</a>
     </li></ul></dd>
 
 
@@ -1674,7 +1831,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-272">line 272</a>
+        <a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-280">line 280</a>
     </li></ul></dd>