Question

脚本iScroll4以这种方式触发

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

然而，假设存在具有ID“包装器”的元素。我想在类名为“scrollable”的所有元素上触发它。我已经在这个脚本的插件上看到了这个。任何想法如何在这里做？

Answer 1

您可以使用相同的类“可滚动”和...分配不同的ID。

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

Answer 2

我在Mobile Site: Lack of horizontal scrolling on iPhone

中回答了这个问题

使用jQuery和iScroll，您可以进行以下操作：

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>

对于我指出的其他问题，这是test-case（http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html）。

Answer 3

这是一个2年的对话，到我写作的时候，只要StackOverflow还活着，这个对话就会留在这里。

通过搜索引擎，我与此对话相关联，因为我有类似的问题。

然而，这些都没有解决我的问题。

基于 Franz 理念，我可以轻松实现这样一个完美而简单的解决方案：

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

分别动态地将ID 分配给预期的可分析元素，并告诉 iScroll5 使它们滚动。

这可能有助于某人

在具有特定类的所有元素上触发iScroll 4

3 个答案: