Monday, 8 August 2011

Enabling Select & Input boxes using iScroll | Javascript


iScroll works great whenever you have static content inside area to be scrolled.But if you have any kind of select and input boxes  inside the scrolling region, selecting and input values no longer works when you click on that.

Issue:
iScroll cancels the default behavior of select and input tag.

Script:
<html>
<head>.......</head>
<body>.....</body>

<script type="text/javascript">
            var myScroll;
function loaded() {
                
                myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded, false);
// 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.
  $('select').bind('touchstart', function() {
//Destroy the object of iScroll
  myScroll.destroy();
})
.bind('touchend', function()
{
//Again creates the object of iScroll
   myScroll = new iScroll('scroller');

});
</script>
</html>

*script can be used after end of body & before end of the Html tag.
It works fine for me.

Cheers
-AJ

No comments:

Post a Comment