how to insert Two iscrolls on one page
https://stackoverflow.com//questions/10698848
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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
Thanks..
Solution 2
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>
OTHER TIPS
<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>
Check demo here
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(); like
$.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 is
<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 is
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...
*/
});
}
});
};
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
