Dienstag, Januar 21, 2020

Mehrere iScroll Elemente auf der gleichen Seite

Mache ich eine mobile website mit jQtouch und iScroll.

Ich wan ‚ T, um mehrere scrollbare Bereiche mit iScroll, aber nur von den Listen arbeitet mit iScroll…

Habe ich versucht mit diesem:

var scroll1, scroll2;
function loaded() {
   scroll1 = new iScroll('wrapper');
   scroll2 = new iScroll('list_wrapper');
}

Aber ohne Glück.
Jemand eine Lösung, die funktioniert?

Mein html:

<div id="wrapper">
    <ul>
        <li><a href="#">Test</a></li>
    </ul>
</div>

<div id="list_wrapper">
    <ul>
        <li><a href="#">Test</a></li>
    </ul>
</div>

4 Kommentare

  1. 2

    Ich bin mit diesem Ansatz.

    Html:

    <div class="carousel" id="alt-indie">
        <div class="scroller">
            <ul>
                <li></li>
                //etc
            </ul>
        </div>
    </div>

    JS:

    $('.carousel').each(function (index) {
        new iScroll($(this).attr('id'), { /* options */ });
    });

    also nichts mit der Klasse der „Karussell“ – wird ein Schieberegler.

  2. 0

    Ihre html-scheint korrekt zu sein,

    stellen Sie sicher, ‚loaded‘ – Funktion aufgerufen wird, als wel.

    Etwas wie dieses:

    document.addEventListener('DOMContentLoaded', loaded, false);

    hoffe, das hilft.

  3. 0
    var scroll1, scroll2;
    
    $("#you_might_like_index").live("pageshow", function() {
    
      setTimeout(function(){scroll1 = new iScroll('wrapper');}, 0);
      setTimeout(function(){scroll2 = new iScroll('list_wrapper');}, 0);
    });
    
    <div data-role="page" id="you_might_like_index">
    
      <div id="wrapper">
        <div id="scroller">
          <ul>
            <li><a href="#">Test</a></li>
          </ul>
        </div>
      </div>
    
    
      <div id="list_wrapper">
        <div id="scroller">
          <ul>
            <li><a href="#">Test</a></li>
          </ul>
        </div>
      </div>
    
    </div>
  4. 0

    Diese Antwort vielleicht ein bisschen spät… aber da war ich zu fest auf das gleiche problem, hier meine Lösung, die wunderbar funktioniert.
    Hinweis: Diese Lösung erfordert jquery, aber ich benutze es trotzdem.

    Den script-Teil:

    function iscroller_init () {
        var iscroller = $('.iscroller');
        iscroller.each(function(index){
            $(this).addClass('iscroller'+index).attr('iscroller_id','iscroller'+index);
            var tmpfnc = new Function('var myScroll'+index);
            tmpfnc();
            var tmpfnc = new Function('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true });');
            tmpfnc();
        });
    }
    
    function iscroller_reinit (el) {
        var el = $(el);
        var iscroller = $('.iscroller');
        var i = iscroller.index(el);
        var tmpfnc = new Function('var myScroll'+i+' = new IScroll(\'.iscroller'+i+'\', { mouseWheel: true });');
        tmpfnc();
    }
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    
    $(document).ready(function(){
        if ($('.iscroller').length > 0) iscroller_init ();
    });

    Html:

    <div class="scrollholder fl">
        <div class="iscroller">
            <div class="scroller">
                <ul>
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>Pretty row 3</li>
                    <li>Pretty row 4</li>
                    .....
                    <li>Pretty row 47</li>
                    <li>Pretty row 48</li>
                    <li>Pretty row 49</li>
                    <li>Pretty row 50</li>
                </ul>
            </div>
        </div>
    </div>

    wo die Eltern <div class="scrollholder fl">ist das übergeordnete div-Element, welches positioniert werden können, wo Sie wollen, und mehrere Male.
    Info: Die Klasse „fl“ funktioniert auch als css-separator für "float:left;" in meinem Fall und ist nicht entsprechend jede iscroll-Funktion.
    Die zweite Funktion iscroller_reinit (el) ist für Neuinitialisierung der angegebenen single iscroller, kann ausgelöst werden, nachdem der container beladen wurde durch ajax-request.

Kostenlose Online-Tests