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 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;
    }

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;
    }

• javascript
• jquery
• jquery-plugins
• iscroll4

4 Answers 4

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/dropbox/iscroll4/examples/simple/

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

if you set the style on the div tag you put the scroller on to (example)

style="position:relative;overflow: hidden;height:350px;

i think it's setting the height explicitly that should solve the dragging problem

Don't you just want:

.content {overflow-y:scroll;}

Is that not what you're saying mate?

The elements within the scroll div can't be floating. If they are floating and not cleared the flow of the page will mean your scrolling div is not the correct height. Try avoiding any floats within your scrolling and div and see how that goes. This was the problem for me.

I also found Matthews answer to be helpful as I was also calling iscroll on the wrong div. I think the confusing thing about the iScroll example is that it's easy to assume iScroll is called on the div with the ID scroller, but it's called on the wrapper div. The div with the ID scroller doesn't actually need an ID and I think for the examples sake this would be clearer without that. e.g.

<div id="wrapper">
    <div>
         <p>Whatever you want here</p>
         <ul>
             <li>1</li>
         </ul>
    </div>
</div>
...
myScroll = new iScroll('wrapper');