Fatal编程技术网
  • jquery/
  • Jquery 在具有特定类的所有元素上触发iScroll 4

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

jquery

Jquery 在具有特定类的所有元素上触发iScroll 4,jquery,iscroll4,Jquery,Iscroll4,脚本iScroll4是以这种方式触发的 $(document).ready(function() { var myScroll; myScroll = new iScroll('wrapper'); }); 但是，它假设有一个ID为“wrapper”的元素。我想在类名为“scrollable”的所有元素上触发此操作。我已经在这个脚本的插件上看到了这一点。有什么办法吗？你可以给同一

脚本iScroll4是以这种方式触发的

$(document).ready(function() {
                var myScroll;
                myScroll = new iScroll('wrapper');              
            });
但是，它假设有一个ID为“wrapper”的元素。我想在类名为“scrollable”的所有元素上触发此操作。我已经在这个脚本的插件上看到了这一点。有什么办法吗？

你可以给同一个类分配一个不同的ID“可滚动”，然后

您可以为同一类分配不同的ID“可滚动”，然后

我已经回答过了

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

HTML: 


试验
标题
Lorem ipsum dolor sit amet。



另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是





Lorem ipsum dolor sit amet。
CSS: 


.scrollerType{
溢出：隐藏；
最大高度：200px；
/*输入您希望滚动条div具有的最大高度，
通常小于设备的窗口大小，如200px左右*/
}
div.divToBeScrolled{
溢出：滚动；
显示：块；
}
JS/jQUERY： 


var snippetName=新数组（）//创建一个新数组以生成iscroll的变量名称
var selfId=新数组（）//创建一个新数组以生成滚动条的名称
$（'.syntaxhighlighter'）.each（函数（索引）{//for each'.syntaxhighlighter'和'index'作为计数器
selfId[index]=“scrollerId”+index；//为容器创建新的id名称
$（this）.wrap（“”）；//用容器包装每个.syntaxhighlighter
var timeout=setTimeout（function（）{//yes，timeout。这主要是为了支持Android
snippetName[index]=新的iScroll（selfId[index]，{//初始化多个iScroll，每个iScroll都有一个索引并以selfId为目标
//这里您声明了各种选项-请参阅iScroll页面上的“将参数传递给iScroll”
//我想这是最好的一套
快照：错，
动量：是的，
hScrollbar：错，
vScrollbar:false，
是的，
维斯克罗尔：是的，
桌面兼容性：true
})；//结束新的iScroll
}，100）；//100ms仅bc 0ms或1ms可能不够
}); //完,各
这是我指出的另一个问题的答案。

我已经在

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

HTML: 


试验
标题
Lorem ipsum dolor sit amet。



另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是

另一个标题
文本：



要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是
要滚动的div是





Lorem ipsum dolor sit amet。
CSS: 


.scrollerType{
溢出：隐藏；
最大高度：200px；
/*输入您希望滚动条div具有的最大高度，
通常小于设备的窗口大小，如200px左右*/
}
div.divToBeScrolled{
溢出：滚动；
显示：块；
}
JS/jQUERY： 


var snippetName=新数组（）//创建一个新数组以生成iscroll的变量名称
var selfId=新数组（）//创建一个新数组以生成滚动条的名称
$（'.syntaxhighlighter'）.each（函数（索引）{//for each'.syntaxhighlighter'和'index'作为计数器
selfId[index]=“scrollerId”+index；//为容器创建新的id名称
$（this）.wrap（“”）；//用容器包装每个.syntaxhighlighter
var timeout=setTimeout（function（）{//yes，timeout。这主要是为了支持Android
snippetName[index]=新的iScroll（selfId[index]，{//初始化多个iScroll，每个iScroll都有一个索引并以selfId为目标
//这里您声明了各种选项-请参阅iScroll页面上的“将参数传递给iScroll”
//我想这是最好的一套
快照：错，
动量：tru

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



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



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



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



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