Проблемы с iScroll в div с анимацией jQuery

У меня возникли проблемы с iScroll и div, в котором он реализован.

Все работает отлично, кроме одного.

<div class="previous"></div>
<div style="width: 100%; position: relative;" id="wrapper">
    <div class="container" style="width: 300%; position: absolute;">
        <div style="width: 33.3333%; float: left;">content block one</div>
        <div style="width: 33.3333%; float: left;">content block two</div>
        <div style="width: 33.3333%; float: left;">content block three</div>
    </div>
</div>
<div class="next"></div>

У меня есть функция jQuery, которая перемещает div .container влево или вправо на 100% в зависимости от того, какую кнопку вы нажимаете. «предыдущий» или «следующий».

Теперь проблема возникает с изменениями iScroll. Он вставляет новый стиль в дочерний элемент div '#wrapper', чтобы перемещать его при пролистывании пальцем. Поэтому, когда вы нажимаете «Далее» и «Предыдущий», он не улавливает это, поэтому, когда вы находитесь в последнем div, вы все равно можете провести пальцем в область «.next» div... которая ничего не содержит.

Я надеюсь, что в этом есть смысл. Я хотел бы изменить iScroll.js или что-то еще, чтобы изменить абсолютную позицию div '.container'.

Заранее спасибо.

Вот мой код jQuery для анимации движения с помощью кнопок.

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    $(".container").animate({"left": "-=200%"}, "slow");
} else {
    counter --;
    $(".container").animate({"left": "+=100%"}, "slow");
}
return counter;
});

//Next arrow function
$(".next").click(function(){

if (counter === 3){
    counter = 1;
    $(".container").animate({"left": "+=200%"}, "slow");
} else {
    counter ++;
    $(".container").animate({"left": "-=100%"}, "slow");
}
return counter;
});

</script>

jquery iscroll4
person Gezzasa    schedule 09.05.2012    source источник
comment
стиль=ширина: 300%; position: absolute;› Свойство CSS не находится внутри атрибута style=. Опечатка или возможная причина проблемы?   -  person Flater    schedule 09.05.2012
comment
Это была опечатка. Отредактировал пост. Спасибо   -  person Gezzasa    schedule 10.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо,

Я понял, что делать.

в свои функции я добавил функцию iScroll.

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    } else {
        counter --;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

//Next arrow function
$(".next").click(function(){

    if (counter === 3){
        counter = 1;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500););
    } else {
        counter ++;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

</script>
person Gezzasa    schedule 10.05.2012