同一页面上有多个iScroll元素
Multiple iScroll elements on same page
我正在用jQtouch和iScroll制作一个移动网站。
我不想用iScroll获得多个可滚动区域,但只有一个列表可以用iScrol。。。
我试过这个:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper');
scroll2 = new iScroll('list_wrapper');
}
但没有运气。有人有有效的解决方案吗?
我的html:
<div id="wrapper">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
<div id="list_wrapper">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
我正在使用这种方法。
Html:
<div class="carousel" id="alt-indie">
<div class="scroller">
<ul>
<li></li>
// etc
</ul>
</div>
</div>
JS:
$('.carousel').each(function (index) {
new iScroll($(this).attr('id'), { /* options */ });
});
所以任何具有"旋转木马"类的东西都将变成一个滑块。
您的html似乎是正确的,
确保"loaded"函数被调用为wel。
类似这样的东西:
document.addEventListener('DOMContentLoaded', loaded, false);
希望能有所帮助。
var scroll1, scroll2;
$("#you_might_like_index").live("pageshow", function() {
setTimeout(function(){scroll1 = new iScroll('wrapper');}, 0);
setTimeout(function(){scroll2 = new iScroll('list_wrapper');}, 0);
});
<div data-role="page" id="you_might_like_index">
<div id="wrapper">
<div id="scroller">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
<div id="list_wrapper">
<div id="scroller">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
</div>
这个答案可能有点晚了。。。但由于我遇到了同样的问题,下面是我的解决方案,效果很好。注意:这个解决方案需要jquery,但我还是在使用它。
脚本部分:
function iscroller_init () {
var iscroller = $('.iscroller');
iscroller.each(function(index){
$(this).addClass('iscroller'+index).attr('iscroller_id','iscroller'+index);
var tmpfnc = new Function('var myScroll'+index);
tmpfnc();
var tmpfnc = new Function('myScroll'+index+' = new IScroll(''.iscroller'+index+''', { mouseWheel: true });');
tmpfnc();
});
}
function iscroller_reinit (el) {
var el = $(el);
var iscroller = $('.iscroller');
var i = iscroller.index(el);
var tmpfnc = new Function('var myScroll'+i+' = new IScroll(''.iscroller'+i+''', { mouseWheel: true });');
tmpfnc();
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$(document).ready(function(){
if ($('.iscroller').length > 0) iscroller_init ();
});
html:
<div class="scrollholder fl">
<div class="iscroller">
<div class="scroller">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
.....
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
</div>
</div>
其中父级<div class="scrollholder fl">
是父级div,可以多次定位在您想要的位置。信息:在我的例子中,类"fl"作为"float:left;"
的css分隔符,与任何iscroll函数都不对应。第二个函数iscroller_reinit (el)
用于重新初始化指定的单个iscroller,可以在容器通过ajax请求加载后启动。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 在Jquery detachment()和appendTo()之后定位元素
- 在 iScroll 中复制 LI 元素上的点击事件
- 同一页面上有多个iScroll元素