如何使用 iScroll 处理多个 DOM 元素（使用 jQTouch 时）

Question

我的标记是

<div id="home" class="current">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller">
            <ul id="thelist" class="plastic"><!-- li items --></ul>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>   
    <!-- Events Details -->
<div id="events">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller"> <!-- stuffsss --></div>
    </div>
    <div class="footer">Footer</div>
</div>

为了让 iScroll (http://cubiq.org/iscroll) 工作，我需要 #scroller 作为 ID（根据我用来初始化 iScroll 的 javascript 代码）。

//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

iScroll 无法正常工作。

但由于我不能有两个具有相同 ID 的不同元素（请注意，上面的标记中有两个具有相同 id 滚动条的元素），因此存在一些冲突，并且我希望 能够通过将 id 更改为类来实现标记上的 iScroll 我尝试将它们更改为类，看看它是否有效，但我无法正确地

更改代码，以便它通过实现类而不是 the 来工作。 ID？？

Answer 1

罗布是对的，但您可以按照您所说的将代码更改为滚动器类。
然后在独特的包装器中初始化滚动条，如下所示：

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}

Answer 2

我不完全清楚您想要实现的目标，但如果您希望页面的两个部分滚动，我建议将 ID 更改为唯一，并使用不同的 ID 实例化两个 iScroll。

Answer 3

我相信您已经弄清楚了，但对于其他用户来说，仍然在为类似的布局（多个滚动条）而苦苦挣扎，并希望它们能够工作。这是其他线程的答案

https://stackoverflow.com/a/7584694/1232232

但要让这个对你有用需要为您的分类（div 容器）分配 ID
注意

<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div> 
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>

：记住不要将相同的 ID 分配给多个元素，始终使用类来实现此目的。