1

如何在一个 html 页面的独立分区中插入两个 iscrolls？

有两个部门，如

<div> 
    <div> 
       some text and images
    </div>
    <div>
       some other text and images
    </div>
</div>

每个部门应独立滚动

谢谢..

4

3 回答 3

4 
<div id="wrapper1">
    <div id="scroller1">
        /* scrollable content */
    </div>
</div>
<div id="wrapper2">
    <div id="scroller2">
        /* another scrollable content */
    </div>
</div>
<script>
    var myScroll1 = new iScroll('wrapper1');
    var myScroll2 = new iScroll('wrapper2');
</script>

在这里查看演示

于 2012-05-22T09:35:54.893 回答
0

感谢帮助。我也找到了答案。。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0,      minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Use transition</title>

<script type="text/javascript" src="../../src/iscroll.js"></script>

<script type="text/javascript">

var scroll1, scroll2;
function loaded() {
    scroll1 = new iScroll('standard');
    scroll2 = new iScroll('transition', { useTransition:true });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

    </script>

<style type="text/css" media="all">
ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
    padding:20px;
}

#standard, #transition {
    position:relative; z-index:1;
    display:block; float:left;
    width:300px; height:400px;
    background:#aaa;
overflow:auto;
border:1px solid #aaa;
}

#standard {
margin-right:20px;
}

.scroller {
position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}

.scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}

.scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}

#myFrame {
position:absolute;
top:0; left:0;
}

</style>
</head>
<body>
<h1>Open this page on iPad to test the difference between standard iScroll and iScroll in "transition mode"</h1>

<div id="standard">
<div class="scroller">
    <ul>
        <li><strong>Standard iScroll</strong></li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>
        <li>Pretty row 4</li>
        <li>Pretty row 5</li>
        <li>Pretty row 6</li>
        <li>Pretty row 7</li>
        <li>Pretty row 8</li>
        <li>Pretty row 9</li>
        <li>Pretty row 10</li>
        <li><strong>Standard iScroll</strong></li>
        <li>Pretty row 12</li>
        <li>Pretty row 13</li>
        <li>Pretty row 14</li>
        <li>Pretty row 15</li>
        <li>Pretty row 16</li>
        <li>Pretty row 17</li>
        <li>Pretty row 18</li>
        <li>Pretty row 19</li>
        <li>Pretty row 20</li>
        <li><strong>Standard iScroll</strong></li>
        <li>Pretty row 22</li>
        <li>Pretty row 23</li>
        <li>Pretty row 24</li>
        <li>Pretty row 25</li>
        <li>Pretty row 26</li>
        <li>Pretty row 27</li>
        <li>Pretty row 28</li>
        <li>Pretty row 29</li>
        <li>Pretty row 30</li>
        <li><strong>Standard iScroll</strong></li>
        <li>Pretty row 32</li>
        <li>Pretty row 33</li>
        <li>Pretty row 34</li>
        <li>Pretty row 35</li>
        <li>Pretty row 36</li>
        <li>Pretty row 37</li>
        <li>Pretty row 38</li>
        <li>Pretty row 39</li>
        <li>Pretty row 40</li>
    </ul>
</div>
</div>


<div id="transition">
<div class="scroller">
    <ul>
        <li><strong>Transition mode</strong></li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>
        <li>Pretty row 4</li>
        <li>Pretty row 5</li>
        <li>Pretty row 6</li>
        <li>Pretty row 7</li>
        <li>Pretty row 8</li>
        <li>Pretty row 9</li>
        <li>Pretty row 10</li>
        <li><strong>Transition mode</strong></li>
        <li>Pretty row 12</li>
        <li>Pretty row 13</li>
        <li>Pretty row 14</li>
        <li>Pretty row 15</li>
        <li>Pretty row 16</li>
        <li>Pretty row 17</li>
        <li>Pretty row 18</li>
        <li>Pretty row 19</li>
        <li>Pretty row 20</li>
        <li><strong>Transition mode</strong></li>
        <li>Pretty row 22</li>
        <li>Pretty row 23</li>
        <li>Pretty row 24</li>
        <li>Pretty row 25</li>
        <li>Pretty row 26</li>
        <li>Pretty row 27</li>
        <li>Pretty row 28</li>
        <li>Pretty row 29</li>
        <li>Pretty row 30</li>
        <li><strong>Transition mode</strong></li>
        <li>Pretty row 32</li>
        <li>Pretty row 33</li>
        <li>Pretty row 34</li>
        <li>Pretty row 35</li>
        <li>Pretty row 36</li>
        <li>Pretty row 37</li>
        <li>Pretty row 38</li>
        <li>Pretty row 39</li>
        <li>Pretty row 40</li>
    </ul>
</div>
</div>


</body>
</html>
于 2012-05-23T05:34:11.597 回答
0

对于 user1409743 来说可能有点晚了，但对于所有其他人来说：这是我的工作解决方案。

注意：这仅在 iScroll5 中进行了测试，但可能仅适用于 iScroll4。

myScroll 将定义为一个数组，所有的 iscroller 都会获得一个类似 ID 的属性，该属性通过索引自增来枚举。

我在带有几个子菜单的移动页面菜单上使用它，如果需要，所有这些都可以单独滚动，就像一个魅力。它也有效，当 ajax 添加更多滚动条时，只需回忆iscroll_load();一下

$.ajax({
    complete: function(){
        iscroll_load();
    }
});

或类似，根据我的经验，最好有一个小的超时。这就是我使用它的方式。新的 myScroll 事件仅适用于新的 iscroll-container，它还没有 scroller 属性。

$(document).ajaxComplete(function(){
    setTimeout(function(){
        iscroll_load();
    },100);
});

HTML 是

<ul id="menus">
    <li class="iscroller menu">
        <ul class="scroller">
        ... some li content here ...
        </ul>
    </li>
    <li class="iscroller menu">
        <ul class="scroller">
        ... some li content here ...
        </ul>
    </li>
</ul

JS是

var iscroll_load = function () {
    var myScroll = new Array();
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        var el = $(this);
        if (!el.is('[scroller]')) {
            el.attr('scroller',index);
            myScroll[index] = new IScroll('[scroller="'+index+'"]',{ 
                mouseWheel: true
                /*
                ... other options...
                */
            });
        }
    });
};
于 2016-11-28T20:00:12.750 回答