Question

This is how I call it

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

/**/
$(document).ready(function() {
    //Created an array for adding n iScroll objects
    var myScroll = new Array();

    $('.content').each(function(){
        if($(this).attr('id')==null){
            $(this).attr('id') = $(this).attr('class');
        }
        id = $(this).attr('id');
        console.log(id);
        $(this).html('<div class="scroller">'+$(this).html()+'</div>');
        myScroll.push(new iScroll(id));
    });
});

I modified it a little bit so you can use it with a class and not only id.

It seems to work (to be enabled) because I can drag the container and its content (but it wont keep position, it will restore on mouse release)

If you want to see it happening please visit http://toniweb.us/grano and click on any item in the menu, the new shown has the effect.

Any idea why it is working but not as expected?

The reason I want to do this is because the container has several subcontainers that will be hidden or shown depending on the content selection.

CSS:

#nvl1{
    padding:0px 25px;
    z-index:10;
    position:absolute;
    left:0px;
    background:url("../img/fondoNivel2.jpg") no-repeat scroll right 0 #79797B ; 
    height:100%;
}



#nvl1 .content{
        width:650px;
        z-index:11;
        display:none;
        color:#6666b6b;
        position:relative;
        line-height:30px;
    }

Answer 1

I had a look at your code on: http://toniweb.us/grano

I think what you would like to do is use iScroll on your class with “scrolling”. That is not what you are doing in the following code but instead you are actually setting iScroll to use the parent of your scroller DIV:

id = $(this).attr('id');
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));

For reference: iScroll uses an ID rather than a class

The effect this is having is that it is causing the “snap” effect on the immediately following block level element – your scroller DIV.

Consider this example where there is a DIV (id=”scroller”) containing an OL which contains a number of (block level) LIs:

http://cubiq.org/dropbox/iscroll4/examples/simple/

Long story short, give your DIV with the scroller class an id and create your iScroll from that instead.