Created
November 18, 2010 02:27
-
-
Save swalke16/704543 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myScroll; | |
var a = 0; | |
function loaded() { | |
setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below. | |
// Please note that the following is the only line needed by iScroll to work. | |
// Everything else here is to make this demo fancier. | |
myScroll = new iScroll('content-scroller', {desktopCompatibility:true}); | |
// find all select elements on the page using jQuery, and attach an event handler to their | |
// touchstart event to destroy the iScroll | |
$('select').bind('touchstart', function() { | |
myScroll.destroy(); | |
}) | |
.bind('touchend', function() // bind an event handler to the select box touchend even to recreate the scroller | |
{ | |
myScroll = new iScroll(document.getElementById('scroller'), {bounce: false); | |
}) | |
.change(function(){ // this code is here just solely to show that it works, and can be removed. | |
alert($(this).val()) | |
}); | |
} | |
// Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques. | |
function setHeight() { | |
var headerH = document.getElementById('global-header').offsetHeight, | |
footerH = document.getElementById('global-footer').offsetHeight, | |
wrapperH = window.innerHeight - headerH - footerH; | |
document.getElementById('content-wrapper').style.height = wrapperH + 'px'; | |
} | |
// Check screen size on orientation change | |
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false); | |
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer). | |
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove. | |
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); | |
// Load iScroll when DOM content is ready. | |
document.addEventListener('DOMContentLoaded', loaded, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment