cómo insertar dos iscrolls en una página

How to insert two iscrolls in saparete divisions of a one html page ?

There is two divisions like

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

each division should scroll independently

Gracias..

preguntado el 22 de mayo de 12 a las 10:05

3 Respuestas

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

Comprobar demo aquí

contestado el 22 de mayo de 12 a las 10:05

in the example code I found one scroller class, it says <div id="standard"> <div class="scroller"> <ul> </ul> </div> </div> <div id="transition"> <div class="scroller"> <ul> </ul> </div> </div> - user1409743

yes you have to initialize the iScroll object by passing id of that element, where scrolling will be created to the child of it, that means scroller class in that example - Ranganadh Paramkusam

Thanks for help. I also found an answer..

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

contestado el 23 de mayo de 12 a las 06:05

May be a bit late for user1409743, but for all others: Here is my working solution.

CAUTION: This is only tested in iScroll5, but may be adapted simply for iScroll4.

myScroll will defined as an array, and all iscrollers get an ID-like attribute, which is enumerated by index auto increment.

I am using it on a mobile page menu with several submenus, which all of these may scroll separately if needed, like a charme. It works also, when more scroller are added by ajax, simply recall iscroll_load(); como

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

or like, after my experience preferably with a small timeout. This is how i am using it. New myScroll events are only applied for new iscroll-container, which do not have the scroller attribute yet.

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

HTML es

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

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...
                */
            });
        }
    });
};

respondido 28 nov., 16:20

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.