jqtouch - 如何使用 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);

但是由于我不能有两个具有相同 ID 的不同元素(请注意，我在上面的标记中有两个具有相同 ID 滚动条的元素)，因此存在一些冲突并且 iScroll 无法正常工作。

我希望能够通过将 id 更改为类来在标记上实现 iScroll。我试图将它们更改为类并查看它是否有效，但我无法正确使用。

谁能帮我更改代码，使其通过实现类而不是 id 来工作？

Answer 1

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

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