Несколько элементов iScroll на одной странице - PullRequest
Новая
       21

Несколько элементов iScroll на одной странице

5 голосов
/ 02 апреля 2012

Я создаю мобильный веб-сайт с jQtouch и iScroll.

Я не хочу получать несколько прокручиваемых областей с iScroll, но только iScroll работает только с списками ...

Я пытался с этим: 

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

Но без удачи.У кого-нибудь есть решение, которое работает?

Мой 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 ]

2 голосов
/ 01 июня 2012

Я использую этот подход.

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 */ });
});

так что все с классом "карусель" станет слайдером.

0 голосов
/ 21 января 2015

Этот ответ может быть немного запоздалым ... но так как я застрял на той же проблеме, вот мое решение, которое прекрасно работает. Примечание. Для этого решения требуется jquery, но я все равно его использую.

Сценарий: 

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>

, где parent <div class="scrollholder fl"> - родительский div, который может быть расположен где угодно, и несколько раз. Информация: класс "fl" работает как разделитель css для "float:left;" в моем случае и не соответствует какой-либо функции iscroll. Вторая функция iscroller_reinit (el) предназначена для повторной инициализации указанного одиночного iscroller, может быть запущена после загрузки контейнера по запросу ajax.

0 голосов
/ 18 апреля 2012 
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>
0 голосов
/ 08 апреля 2012

Ваш HTML кажется правильным,

убедитесь, что функция «загружен» также вызывается.

Примерно так: 

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

надеюсь, что поможет.

...