0

The script iScroll4 is triggered in this manner

$(document).ready(function() {
                var myScroll;
                myScroll = new iScroll('wrapper');              
            });

That however assumes there is an element with ID 'wrapper'. I would like to trigger this on all elements with the class name "scrollable". I have seen this done on a plugin for this script. Any ideas how to do it here?

3 Answers 3

2

You can assign a different ID with the same class "scrollable" and ...

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

    $('.scrollable').each(function(){
        id = $(this).attr('id');
        myScroll.push(new iScroll(id));
    });
});
2
  • nearly works but there is more than one incarnation of my scroll now so only one panel works. This is a problem with having a variable variable so it is essentially a separate question that I will repost
    – Walrus
    Sep 28, 2011 at 15:13
  • the class "scrollable" is the item that needs to scroll? In this case you must apply "iscroll" to the parent div.
    – Franz
    Sep 28, 2011 at 16:33
1

I've answered that in Mobile Site: Lack of horizontal scrolling on iPhone

Using jQuery and iScroll, you could make the following:

HTML:

<html><head>
<title>Test</title>
<!-- include jquery and iscroll -->
</head><body>

<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;">
    <h1>Header</h1>
    Lorem ipsum dolor sit amet.
    <br/><br/>
    <h2>Another header</h2>
    text text:<br/>
    <br/>
    <div class="divToBeScrolled">
        div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
    </div>
    <h2>Another header</h2>
    text text:<br/>
    <br/>
    <div class="divToBeScrolled">
        div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
    </div>
    <h2>Another header</h2>
    text text:<br/>
    <br/>
    <div class="divToBeScrolled">
        div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
    </div>
    <h2>Another header</h2>
    text text:<br/>
    <br/>
    <div class="divToBeScrolled">
        div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
    </div>
    <br/>
    <br/>
    Lorem ipsum dolor sit amet.
</div>
</body></html>

CSS:

<style type="text/css">
    .scrollerType {
        overflow:hidden;
        max-height:200px;
        /* put max height you want the scroller div to have, 
        normally less than the device's window size, like 200px or so so.*/
    }

    div.divToBeScrolled {
        overflow:scroll;
        display:block;
    }
</style>

JS/jQUERY:

<script charset="utf-8" type="text/javascript">
    var snippetName = new Array(); //creates a new array to make the var names for iscroll
    var selfId = new Array(); //creates a new array to make the names for the scrollers

    $('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
        selfId[index] = 'scrollerId'+index; //creating a new id name for the container
        $(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
        var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
            snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
                //here you declare various options - see "Passing parameters to the iScroll" at iScroll page
                //this is the best set, i think
                snap: false,
                momentum: true,
                hScrollbar: false,
                vScrollbar: false,
                hScroll: true,
                vScroll: true,
                desktopCompatibility:true
            }); //end new iScroll
        },100); //100ms just bc 0ms or 1ms might not be enough

    }); //end .each
</script>

This is the test-case ( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html ) for the other question i've pointed out.

4
  • This was really really useful to me. Thanks! I still have a question. How can I then apply refresh() to all those iscrolls at the same time? Normally it would be: myScroll.refresh();
    – Alvaro
    Sep 2, 2012 at 9:59
  • I got my answer, this is what I did:for (i=0; i<number_of_iscroll_elements; i++) { snippetName[i].refresh(); }
    – Alvaro
    Sep 2, 2012 at 10:23
  • @Alvaro Glad it was useful and you could make it. As suggestion, change number_of_iscroll_elements to snippetName.length and i=0 to i=1 (since length starts from 1 and not zero) and this way you don't need to put the number everytime you change the number of scrolls. I've yet to test this but I'm quite sure will work.
    – RaphaelDDL
    Sep 3, 2012 at 20:18
  • I know it's a bit old but how would the script be changed to use our own ids? May 8, 2014 at 13:22
0

This is a 2 years old conversation to the time i am writting, still this conversation will stay here as long as StackOverflow still alive.

Through search engine i was linked to this conversation as i had similar issue.

However, none of these solve my issue.

In my own idea building on Franz idea you could easily acheive a perfect and simple solution like this:

var contentToScroll;
var idNum=1;
    $('.scrollable').each(function(){

//e.g <li class="scrollable" id="conT1"> Contents</li>
//<li class="scrollable" id="conT2"> Contents</li> e.t.c

     $(this).attr("id", 'conT'+idNum);//assign ids here
       var id = $(this).attr('id');
       idNum++;
       contentToScroll=new IScroll('#'+id,{scrollbars: true});
    });

Dynamically assign IDs to the expected scollable elements individually and tell the iScroll5 to make them scrollabile.

This may help someone

1
  • This code makes the second (or everything after first) .scrollable div contents to have more white space below. But when window re-sizes, it jumps to be normal. Jan 10, 2016 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.