Skip to content

Instantly share code, notes, and snippets.

@alanning

alanning/iscroll-registerYHook.html

Last active May 19, 2016 11:34
Show Gist options
  • Save alanning/7864702 to your computer and use it in GitHub Desktop.
Save alanning/7864702 to your computer and use it in GitHub Desktop.
Download ZIP
An extension to IScroll [1] which enables callbacks to be registered for a given Y position. Callbacks are called when the user scrolls past or back above the given position. Modified IScroll probe example [2]. To run locally, git clone IScroll repo and add this file to the demos/probe folder. 1. https://github.com/cubiq/iscroll 2. https://githu…
Raw
iscroll-registerYHook.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;
var debug = true;
/**
* Registers callbacks that are called whenever the user scrolls
* past the designated position.
*
* @method IScroll.registerYHook
* @param {Number} y
* @param {Function} belowCallback Function to call when user scrolls down past the 'y' position
* @param {Function} [aboveCallback] Optional, function to call when user scrolls back above the 'y' position
*/
IScroll.prototype.registerYHook = function (y, belowCallback, aboveCallback) {
"use strict";
if ('number' !== typeof y ||
'function' !== typeof belowCallback) {
return false;
}
if (!this._onScrollHandler) {
this._onScrollHandler = function _onScrollHandler () {
"use strict";
var targetY,
currentY = this.y,
yHooks = this._yHooks,
below = [],
above = [],
callback;
// NOTE: IScroll positions are negative
for (targetY in yHooks) {
if (targetY > currentY) {
below.push(yHooks[targetY])
} else {
above.push(yHooks[targetY])
}
}
// process all callbacks below current position
for (var i = 0; callback = below[i]; i++) {
if (callback.state == 'below') {
// skip. already processed
continue;
}
callback.state = 'below';
callback.below.call(this)
}
// process all callbacks above current position
for (var i = 0; callback = above[i]; i++) {
if (callback.state == 'above') {
// skip. already processed
continue;
}
callback.state = 'above';
if ('function' === typeof callback.above) {
callback.above.call(this)
}
}
}
this.on('scroll', this._onScrollHandler);
this.on('scrollEnd', this._onScrollHandler);
this._yHooks = {};
}
if ('undefined' !== typeof debug && debug &&
console && console.log) {
console.log('registering IScroll YHook: ' + y);
}
// add required callback
this._yHooks[y] = {
below: belowCallback,
state: 'above'
};
// include optional callback
if ('function' === typeof aboveCallback) {
this._yHooks[y].above = aboveCallback;
}
return true;
};
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);
function below100Handler () {
console.log('scrolled past -100')
}
function below400Handler () {
console.log('scrolled past -400')
}
function above400Handler () {
console.log('scrolled back above -400')
}
myScroll.registerYHook(-100, below100Handler);
myScroll.registerYHook(-400, below400Handler, above400Handler);
}
function scrolledPast (pos) {
return function () {
}
}
function scrolledBack (pos) {
return function () {
console.log('scrolled back above: ' + pos)
}
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment