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を持つ2つの異なる要素を持つことはできないため（上記のマークアップに同じIDスクローラーを持つ2つの要素があることに注意してください）、いくつかの競合があり、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

何を達成しようとしているのか完全にはわかりませんが、ページの2つの部分をスクロールする場合は、IDを一意に変更し、異なるIDで2つのiScrollをインスタンス化することをお勧めします。

于 2011-07-19T15:19:20.717 に答える
0

あなたはそれを理解していると確信していますが、他のユーザーにとってはまだ同様のレイアウト（複数のスクローラー）に苦労していて、それらを機能させたいと思っています。これが他のスレッドからの回答です

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を割り当てないように注意してください。そのためには、常にクラスを使用してください。

于 2012-08-29T04:55:33.190 に答える