4

我的标记为

<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) 工作，我需要#scrolleras 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 来工作？

4

3 回答 3

4

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

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
于 2011-08-23T10:34:03.747 回答
2

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

于 2011-07-19T15:19:20.717 回答
0

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

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 分配给多个元素，始终为此目的使用类。

于 2012-08-29T04:55:33.190 回答