пытается сделать панель навигации для планшета

Question

Я проектирую панель навигации для планшетного сайта. Навигационная панель содержит элементы, отображаемые горизонтально, и я хочу иметь возможность отображать новые элементы с помощью салфетки (вроде потока обложек) без перемещения окна. Это код, я использую в настоящее время (JQuery Mobile):

//Tablet Features 
     $('#navHolder').bind('swipe', 
      function(e) { 
       $('#navHolder').animate({left:thisLeft - 100}); 
      } 
     ); 

Я не думаю, что может вызвать swipe без отключив свитка, но я открыт для любых предложений. Пожалуйста помоги.

Answer 1

Установите родительский контейнер элемента, который вы прокручиваете до overflow : hidden, чтобы не отображались полосы прокрутки. Затем события swipe должны работать нормально, поскольку вы не сможете использовать прокрутку для прокрутки содержимого.

HTML -

<div id="navHolder-container"> 
     <div id="navHolder"> 
      <p>content in here</p> 
     </div> 
    </div> 

CSS -

#navHolder { 
    position : absolute; 
    width : 1000px; 
} 
#navHolder-container { 
    position : relative; 
    overflow : hidden; 
    height : 100px; 
    width : 100%; 
} 

JS -

$(function() { 
    var convert = { 
      swipeleft : '-=100', 
      swiperight : '+=100' 
     }; 
    $('#navHolder-container').bind('swipeleft swiperight', function(e) { 
     $('#navHolder').animate({ left: convert[e.type]}); 
    }); 
}); 

Вот демо: http://jsfiddle.net/B8PQn/1/