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无法正常工作。 / p>

我希望能够通过将id更改为类来实现标记上的iScroll。我试图将它们改成类，看它是否有效，但我无法做到。

任何人都可以帮助我更改代码，以便通过实现类而不是id ??

来工作

Answer 1

Rob是对的，但你可以像你说的那样将代码更改为滚动类。然后在这样的独特包装器中初始化您的滚动条：

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

Answer 2

我并不完全清楚你想要实现什么，但是如果你想要滚动页面的两个部分，我会建议将ID更改为唯一，并使用不同的ID实例化两个iScrolls。

Answer 3

我相信你已经弄清楚了，但对于其他仍然在努力使用类似布局（多个滚动条）的用户并希望让它们有效。这是其他线程的答案

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

但为了使其工作，您需要将ID分配给您的分类（div容器）像

<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，请始终使用类来实现此目的。

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

3 个答案: