Skip to content

Commit ef34a4d

Browse files
janpaepkejanpaepke
committed
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.
1 parent 95de841 commit ef34a4d

15 files changed

+413
-72
lines changed

‎ScrollMagic.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ScrollMagic",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"title": "ScrollMagic",
55
"author": {
66
"name": "Jan Paepke",

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ScrollMagic",
33
"description": "The jQuery plugin for magical scroll interactions.",
4-
"version": "1.0.3",
4+
"version": "1.0.4",
55
"homepage": "http://janpaepke.github.io/ScrollMagic/",
66
"author": {
77
"name": "Jan Paepke",

‎css/demo.css

+37
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,19 @@ div#content-wrapper {
5656
min-width: 900px;
5757
min-height: 500px;
5858
}
59+
html.touch div#content-wrapper {
60+
min-width: 700px;
61+
}
62+
.scrollContainer {
63+
overflow-y: scroll;
64+
overflow-x: hidden;
65+
min-width: 650px;
66+
width: 100%
67+
}
68+
.scrollContent {
69+
position: relative;
70+
/*height: 100%;*/
71+
}
5972
section {
6073
height: 100%;
6174
}
@@ -306,6 +319,9 @@ h3 {
306319
left: -118px;
307320
top: -24px;
308321
}
322+
#info ul.nexttohat {
323+
padding-left: 158px;
324+
}
309325
#speechbubble p {
310326
margin: 0;
311327
text-align: center;
@@ -323,4 +339,25 @@ h3 {
323339
}
324340
a:hover #speechbubble p:last-child {
325341
text-decoration: underline;
342+
}
343+
html.touch body {
344+
font-size: 25px;
345+
}
346+
html.touch #info #hatcontainer {
347+
margin-bottom: 260px;
348+
height: 300px;
349+
width: 240px;
350+
}
351+
html.touch #info #hatcontainer .hat {
352+
left: 90px;
353+
}
354+
html.touch #info #hatcontainer #bunny {
355+
left: 110px;
356+
}
357+
html.touch #info #hatcontainer #speechbubble {
358+
left: -20px;
359+
top: 35px;
360+
}
361+
html.touch #info ul.nexttohat {
362+
padding-left: 240px;
326363
}

‎docs/ScrollMagic.html

+165-8
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ <h5>Parameters:</h5>
550550

551551
<dt class="tag-source">Source:</dt>
552552
<dd class="tag-source"><ul class="dummy"><li>
553-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-200">line 200</a>
553+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-208">line 208</a>
554554
</li></ul></dd>
555555

556556

@@ -709,7 +709,7 @@ <h5>Parameters:</h5>
709709

710710
<dt class="tag-source">Source:</dt>
711711
<dd class="tag-source"><ul class="dummy"><li>
712-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-415">line 415</a>
712+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-456">line 456</a>
713713
</li></ul></dd>
714714

715715

@@ -860,7 +860,7 @@ <h5>Parameters:</h5>
860860

861861
<dt class="tag-source">Source:</dt>
862862
<dd class="tag-source"><ul class="dummy"><li>
863-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-391">line 391</a>
863+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-432">line 432</a>
864864
</li></ul></dd>
865865

866866

@@ -1022,7 +1022,7 @@ <h5>Parameters:</h5>
10221022

10231023
<dt class="tag-source">Source:</dt>
10241024
<dd class="tag-source"><ul class="dummy"><li>
1025-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-334">line 334</a>
1025+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-375">line 375</a>
10261026
</li></ul></dd>
10271027

10281028

@@ -1176,7 +1176,7 @@ <h5>Parameters:</h5>
11761176

11771177
<dt class="tag-source">Source:</dt>
11781178
<dd class="tag-source"><ul class="dummy"><li>
1179-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-367">line 367</a>
1179+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-408">line 408</a>
11801180
</li></ul></dd>
11811181

11821182

@@ -1321,7 +1321,7 @@ <h5>Parameters:</h5>
13211321

13221322
<dt class="tag-source">Source:</dt>
13231323
<dd class="tag-source"><ul class="dummy"><li>
1324-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-237">line 237</a>
1324+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-245">line 245</a>
13251325
</li></ul></dd>
13261326

13271327

@@ -1369,6 +1369,163 @@ <h5>Example</h5>
13691369

13701370

13711371

1372+
<dt>
1373+
<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>
1374+
1375+
1376+
</dt>
1377+
<dd>
1378+
1379+
1380+
<div class="description">
1381+
<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>
1382+
</div>
1383+
1384+
1385+
1386+
1387+
1388+
1389+
1390+
<h5>Parameters:</h5>
1391+
1392+
1393+
<table class="params table table-striped">
1394+
<thead>
1395+
<tr>
1396+
1397+
<th>Name</th>
1398+
1399+
1400+
<th>Type</th>
1401+
1402+
1403+
<th>Argument</th>
1404+
1405+
1406+
1407+
1408+
<th class="last">Description</th>
1409+
</tr>
1410+
</thead>
1411+
1412+
<tbody>
1413+
1414+
1415+
<tr>
1416+
1417+
<td class="name"><code>newLoglevel</code></td>
1418+
1419+
1420+
<td class="type">
1421+
1422+
1423+
<span class="param-type">number</span>
1424+
|
1425+
1426+
<span class="param-type">function</span>
1427+
1428+
1429+
1430+
</td>
1431+
1432+
1433+
<td class="attributes">
1434+
1435+
&lt;optional><br>
1436+
1437+
1438+
1439+
1440+
1441+
</td>
1442+
1443+
1444+
1445+
1446+
<td class="description last"><p>The new value or function used for the scroll position of the container.</p></td>
1447+
</tr>
1448+
1449+
1450+
</tbody>
1451+
</table>
1452+
1453+
1454+
1455+
1456+
<dl class="details">
1457+
1458+
1459+
1460+
1461+
1462+
1463+
1464+
1465+
1466+
1467+
1468+
1469+
1470+
1471+
1472+
1473+
1474+
1475+
1476+
<dt class="tag-source">Source:</dt>
1477+
<dd class="tag-source"><ul class="dummy"><li>
1478+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-343">line 343</a>
1479+
</li></ul></dd>
1480+
1481+
1482+
1483+
1484+
1485+
1486+
1487+
</dl>
1488+
1489+
1490+
1491+
1492+
1493+
1494+
1495+
1496+
1497+
1498+
1499+
<h5>Returns:</h5>
1500+
1501+
1502+
<div class="param-desc tag-returns">
1503+
<p>Current scroll position or parent object for chaining.</p>
1504+
1505+
{
1506+
<span class="param-type">number</span>
1507+
|
1508+
1509+
<span class="param-type"><a href="ScrollMagic.html">ScrollMagic</a></span>
1510+
1511+
}
1512+
1513+
</div>
1514+
1515+
1516+
1517+
1518+
1519+
<h5>Example</h5>
1520+
1521+
<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>
1522+
1523+
1524+
1525+
</dd>
1526+
1527+
1528+
13721529
<dt>
13731530
<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>
13741531

@@ -1480,7 +1637,7 @@ <h5>Parameters:</h5>
14801637

14811638
<dt class="tag-source">Source:</dt>
14821639
<dd class="tag-source"><ul class="dummy"><li>
1483-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-306">line 306</a>
1640+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-314">line 314</a>
14841641
</li></ul></dd>
14851642

14861643

@@ -1674,7 +1831,7 @@ <h5>Parameters:</h5>
16741831

16751832
<dt class="tag-source">Source:</dt>
16761833
<dd class="tag-source"><ul class="dummy"><li>
1677-
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-272">line 272</a>
1834+
<a href="jquery.scrollmagic.js.html">jquery.scrollmagic.js</a>, <a href="jquery.scrollmagic.js.html#sunlight-1-line-280">line 280</a>
16781835
</li></ul></dd>
16791836

16801837

0 commit comments

Comments
 (0)