Trigger iScroll 4 on all elements with a certain C

2019-02-21 01:56发布

站内问答 / jQuery
1292 3 6

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条回答
不美不萌又怎样
2楼-- · 2019-02-21 02:09

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.

查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-02-21 02:23

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));
    });
});
查看更多
0人赞 添加讨论(0) 举报
疯言疯语
4楼-- · 2019-02-21 02:26

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)