Trigger iScroll 4 on all elements with a certain Class

Question

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?

score 2 · Answer 1 · edited Sep 28 '11 at 16:45

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

edited Sep 28 '11 at 16:45

Community

1
1

answered Sep 28 '11 at 14:18

Franz

46
3

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 '11 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 '11 at 16:33

score 1 · Answer 2 · edited May 23 '17 at 11:45

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.

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 02 '12 at 09:59
@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 03 '12 at 20:18
I know it's a bit old but how would the script be changed to use our own ids? — scooterlord, May 08 '14 at 13:22

score 0 · Answer 3 · answered Sep 08 '14 at 13:33

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

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. — Shah Abaz Khan, Jan 10 '16 at 14:01

Trigger iScroll 4 on all elements with a certain Class

3 Answers3

Linked