2014-02-19 3 views
1

Структура iScroll это "Как отключить событие перетаскивания на iScroll?

<div class="navigation"> 
     <div class="left_arrow"> 
      <img class="img_left" src="images/a_right.png"> 
     </div> 
     <div id="navigation_scroller"> 
      <ul id="navigation_list"> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
       <li><a href="house_disposition.htm"></a></li> 
      <ul> 
     </div> 
     <div class="right_arrow"> 
      <img class="img_left" src="images/a_right.png"> 
     </div> 
    </div> 

Теперь требование отключить перетащить iscroll, единственный способ прокрутки #navigation_scroller нажмет .left_arrow или .right_arrow.

И видимое <li> в iscroll на большинство из них 5.

Если <li> меньше 5, просто отключить весь путь прокручивать #navigation_scroller.

Когда <li> больше 5, отключить перетащить iscroll, просто переместите <li> влево/вправо по одному щелчком .left_arrow/right_arrow


Есть две проблемы.

  1. Как отключить затянулся iscroll? Я ничего не нашел об этом

  2. Как прокрутить <li> один за другим? Можно ли вызвать метод scrollToElement?

ответ

4

Документация не перечислю некоторые, но iScroll V5.1.1 имеет дополнительные опции, как:

  • MouseWheel
  • disableMouse
  • disablePointer
  • disableTouch

вас может установить все из них в false/true и не взаимодействовать ион с мышью, тачпад, наш сенсорный экран не будет обработан.

Чтобы изменить слайды со стрелками, вы можете использовать эти методы:

  • следующего()
  • преда()

или лучше

  • GotoPage (х, у)

Чтобы переместиться со страницы на страницу, вы должны установить параметр привязки для соответствия элементам, которые вы описываете как страница. В вашем случае варианты могут выглядеть следующим образом:

var options = { 
    snap: 'li', // your page selector 
    snapThreshold: 0.1, 
    mouseWheel: false, 
    disableMouse: true, 
    disablePointer: true, 
    disableTouch: true 
}; 

var scroll = new IScroll('#navigation_scroller', options); 

Теперь просто прикрепить события на стрелки, чтобы позвонить scroller.goToPage(x, y) соответственно. X и Y представляет собой номер «страницы» (в вашем случае номер заказа <li>). Чтобы получить текущую позицию страницы, вы должны прочитать соответственно scroller.currentPage.pageY или scroller.currentPage.pageX.

Это должно помочь вам достичь желаемого поведения вашего проекта.

Смежные вопросы